Buenas a todos los foreros.
Estoy intentando realizar un slider que ocupe toda la pantalla. El tema viene cuando agrando o hago mas pequeña la pantalla, los elementos "li" no se me ajustan al tamaño del navegador, sino que se me quedan con el tamaño con el que cargo la pagina.
He intentado con un window resize pero no me sale tampoco....
Si me pudierais echar una mano os lo agradeceria mucho, o si sabeis de algun tutorial... porque no encuentro nada en google al respecto.
Código Javascript
:
Ver original$(document).ready(function() {
var slider = {};
slider.initQuery = '#slider';
slider.slider = $( slider.initQuery + " ul,ul"+slider.initQuery);
slider.slides = slider.slider.find('li');
slider.number = slider.slides.length;
slider.actual = 0; primera, o sea la 0
slider.height = 0;
slider.width = 0;
for(i=0;i<slider.number;i++)
{
var w = $(slider.slides[i]).width();
var h = $(slider.slides[i]).height();
slider.height = ( h > slider.height ) ? h : slider.height;
slider.width = ( w > slider.width ) ? w : slider.width;
}
slider.slider.css({
overflow: "hidden",
width: slider.width,
height: slider.height,
position: 'relative'
});
for (var i=0;i<slider.number;i++)
{
var sl = $(slider.slides[i]);
sl.attr('class',sl.attr('class') + " slider-slide-"+i);
sl.css({
position : 'absolute',
left : slider.width * i
});
}
slider.go = function (where) {
if (where == 'next')
{
slider.actual = ( slider.actual < slider.number-1) ? slider.actual*1 + 1 : 0;
}
else if (where == 'prev')
{
slider.actual = ( slider.actual > 0) ? slider.actual - 1 : slider.number-1;
}
else
{
slider.actual = where;
}
for (var i=0;i<slider.number;i++)
{
var sl = $(slider.slides[i]);
sl.animate({
left : slider.width * (i - slider.actual)
},2000);
}
};
$(slider.initQuery + " .slider-next").click(function () {
slider.go('next');
return false;
});
$(slider.initQuery + " .slider-prev").click(function () {
slider.go('prev');
return false;
});
});