Foros del Web » Programando para Internet » Jquery »

Slider a pantalla completa

Estas en el tema de Slider a pantalla completa en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/05/2013, 10:19
Avatar de wolfmoon  
Fecha de Ingreso: octubre-2007
Mensajes: 189
Antigüedad: 16 años, 6 meses
Puntos: 2
Slider a pantalla completa

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
  1. $(document).ready(function() {
  2.  
  3. var slider = {};
  4.  
  5. slider.initQuery = '#slider';
  6.  
  7. slider.slider = $( slider.initQuery + " ul,ul"+slider.initQuery);
  8. slider.slides = slider.slider.find('li');
  9. slider.number = slider.slides.length;
  10. slider.actual = 0; primera, o sea la 0
  11. slider.height = 0;
  12. slider.width = 0;
  13.  
  14. for(i=0;i<slider.number;i++)
  15. {
  16.   var w = $(slider.slides[i]).width();
  17.   var h = $(slider.slides[i]).height();
  18.   slider.height = ( h > slider.height  ) ?  h : slider.height; 
  19.   slider.width = ( w > slider.width  ) ? w : slider.width; 
  20. }
  21.  
  22. slider.slider.css({
  23.   overflow: "hidden",
  24.   width: slider.width,  
  25.   height: slider.height,
  26.   position: 'relative'
  27. });
  28.  
  29. for (var i=0;i<slider.number;i++)
  30. {
  31.   var sl = $(slider.slides[i]);
  32.   sl.attr('class',sl.attr('class') + " slider-slide-"+i);
  33.   sl.css({
  34.     position : 'absolute',
  35.     left : slider.width * i
  36.   });
  37. }
  38.  
  39. slider.go = function (where) {
  40.   if (where == 'next')
  41.   {
  42.     slider.actual = ( slider.actual < slider.number-1) ? slider.actual*1 + 1 : 0;
  43.   }
  44.   else if (where == 'prev')
  45.   {
  46.     slider.actual = ( slider.actual > 0) ? slider.actual - 1 : slider.number-1;
  47.   }
  48.   else
  49.   {
  50.     slider.actual = where;
  51.   }
  52.  
  53.   for (var i=0;i<slider.number;i++)
  54.   {
  55.     var sl = $(slider.slides[i]);
  56.     sl.animate({
  57.        left : slider.width * (i - slider.actual)
  58.     },2000);
  59.   }
  60. };
  61.  
  62. $(slider.initQuery + " .slider-next").click(function () {
  63.   slider.go('next');
  64.   return false;
  65. });
  66. $(slider.initQuery + " .slider-prev").click(function () {
  67.   slider.go('prev');
  68.   return false;
  69. });
  70. });

Etiquetas: completa, pantalla, slider
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:32.