1

Quiero crear una animación, una barra de progreso calculando la duration del Slider.

Similar al Slider de presentación de este sitio web: http://themeinthebox.com/demo/color/

Si es posible optimizar el código jQuery del slider, solo si es posible.

$(function() {
  var SliderModule = (function() {
    var pb = {};
    pb.el = $('#slider');
    pb.items = {
      panel: pb.el.find('li')
    }

    // Variables Necesarias
    var SliderInterval,
      currentSlider = 0,
      nextSlider = 1,
      lengthSlider = pb.items.panel.length;

    // Initialize
    pb.init = function(settings) {
      this.settings = settings || {duration: 8000} 
      var output = '';

      // Activamos nuestro slider
      SliderInit();

      for(var i = 0; i < lengthSlider; i++) {
        if (i == 0) {
          output += '<li class="active"></li>'; 
        } else {
          output += '<li></li>';
        }
      }

      // Controles del Slider
      $('#slider-controls').html(output).on('click', 'li', function (e){
        var $this = $(this);
        if (currentSlider !== $this.index()) {
          changePanel($this.index());
        };
      });
    }

    var SliderInit = function() {
      SliderInterval = setInterval(pb.startSlider, pb.settings.duration);
    }

    pb.startSlider = function() {
      var panels = pb.items.panel,
        controls = $('#slider-controls li');

      if (nextSlider >= lengthSlider) {
        nextSlider = 0;
        currentSlider = lengthSlider-1;
      }

      // Efectos
      controls.removeClass('active').eq(nextSlider).addClass('active');
      panels.eq(currentSlider).fadeOut('slow');
      panels.eq(nextSlider).fadeIn('slow');

      // Actualizamos nuestros datos
      currentSlider = nextSlider;
      nextSlider += 1; 
    }

    // Funcion para controles del slider
    var changePanel = function(id) {
      clearInterval(SliderInterval);
      var panels = pb.items.panel,
        controls = $('#slider-controls li');

      // Comprobamos el ID
      if (id >= lengthSlider) {
        id = 0;
      } else if (id < 0) {
        id = lengthSlider-1;
      }

      // Efectos
      controls.removeClass('active').eq(id).addClass('active');
      panels.eq(currentSlider).fadeOut('slow');
      panels.eq(id).fadeIn('slow');

      // Actualizamos nuestros datos
      currentSlider = id;
      nextSlider = id+1;

      // Reactivamos el slider
      SliderInit();
    }


    return pb;
  }());
  SliderModule.init({duration: 4000});
});
/*!
 * @Design slider
 */
* {
  margin: 0;
  padding: 0;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

img {
  height: auto;
  max-width: 100%;
}
 
ul li {
 list-style-type: none;
}
.slider-container{
  width:779px;
  height:448px;
  margin: 0 auto;
  background-color:#FFF;
}

.slider-wrapper {
  position: relative;
  z-index: 90;
  height: 360px;
  width: 100%;
}

.slider-wrapper li {
  display: none;
}

li.slide-current {
  display: block;
}

.slider-wrapper li img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: auto;
}

.slider-controls {
  text-align: center;
  margin-top: -125px;
  position: relative;
  z-index: 90;
}

.slider-controls li {
  background: #415066;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  display: inline-block;
  height: 12px;
  width: 12px;
  margin: 0 4px;
  cursor: pointer;
}

.slider-controls li.active {
  background: #00c5b9;	
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide"><!-- Root slide -->
  <div class="slider-container"><!-- Root slider container -->
    <ul id="slider" class="slider-wrapper">
      <li class="slide-current">
        <img src="http://themeinthebox.com/demo/color/images/slider/bg1.jpg" alt="" /></li>
        <li><img src="http://themeinthebox.com/demo/color/images/slider/bg2.jpg" alt="" /></li>
        <li><img src="http://themeinthebox.com/demo/color/images/slider/bg3.jpg" alt="" /></li>
    </ul>
    <ul id="slider-controls" class="slider-controls"></ul>
  </div><!-- End slider container -->
</div><!-- End slide -->

2
  • Puedes crear el div que hará de barra y en los estilos CSS añadirle la animación, así en el JavaScript de tu slider solo necesitarás setear el tiempo de la animación para que sea el mismo que el del intervalo del slider.
    – eledgaar
    el 19 ago. 2016 a las 21:04
  • @eledgaar Amigo sera que me puedes ayudar con lo que me indicas editando mi código y postearlo como respuesta a mi pregunta.
    – Otto
    el 19 ago. 2016 a las 21:12

1 respuesta 1

5

Una opción que tienes sería quitar el setInterval que tienes para cambiar la imagen activa, y reemplazarlo con un animate de jQuery que se encargaría de hacer que se mueva la barra de progreso y que, al finalizar, llame a la misma función que se hacía en setInterval.

Para ello, los cambios necesarios serían:

  1. Añadir un elemento (un div bastará) al carrusel que utilizarás como barra de progreso.

    <div id="barra"></div>
    
  2. Con CSS posicionar ese elemento debajo de las imágenes (no te voy a engañar, el posicionamiento que utilizas ahora es "interesante", y no en el buen sentido porque puede causarte problemas en el futuro), y darle un ancho de 0.

    #barra {
      position:relative;
      margin-top:15px;
      height:10px;
      background:#00c5b9;
      width:0%;
      z-index:99;
    } 
    
  3. Reemplazar el setInterval por un jQuery animate que hará que la barra ocupe un 100% del padre, durará lo mismo que duraba el intervalo, se ejecutará de manera lineal (para que la barra progrese al mismo paso al principio y final) y cuando termine llame a la misma función del setInterval original.

    Sé que suena complicado, pero no lo es tanto, y el código es bien sencillo:

    //SliderInterval = setInterval(pb.startSlider, pb.settings.duration);
    
    $("#barra").animate({
          width:"100%"
        }, 
        pb.settings.duration,
        "linear",
        pb.startSlider
    );   
    
  4. En la función que se llama al final de la animación (pb.startSlider) tienes que añadir un par de cambios:

    • Primero, pon el ancho de la barra de progreso a cero.
    • Y al final de la función, llama a la función que inicia la animación (SliderInit)

    Ambos cambios podrían ponerse juntos, pero entonces correde nuevo, esto no es complicado:

    pb.startSlider = function() {
    
       $("#barra").css("width", 0);
    
       // ...
    
       SliderInit();
    }
    
  5. Finalmente, debes añadir una lógica similar a la del punto anterior, pero para cuando se pulse en alguno de los botones de la navegación (poner la barra a 0 y reiniciar la animación) en changePanel. La única diferencia es que como ahora mismo estás en mitad de la animación, primero tendrás que pararla (usando stop) y luego hacer los cambios:

    var changePanel = function(id) {
    
         //clearInterval(SliderInterval);
         $("#barra").stop().css("width", 0);
    
         // ...
    
         SliderInit();
     }
    

Con esas modificaciones, la animación quedaría así:

$(function() {
  var SliderModule = (function() {
    var pb = {};
    pb.el = $('#slider');
    pb.items = {
      panel: pb.el.find('li')
    }

    // Variables Necesarias
    var SliderInterval,
        currentSlider = 0,
        nextSlider = 1,
        lengthSlider = pb.items.panel.length;

    // Initialize
    pb.init = function(settings) {
      this.settings = settings || {duration: 8000} 
      var output = '';

      // Activamos nuestro slider
      SliderInit();

      for(var i = 0; i < lengthSlider; i++) {
        if (i == 0) {
          output += '<li class="active"></li>'; 
        } else {
          output += '<li></li>';
        }
      }

      // Controles del Slider
      $('#slider-controls').html(output).on('click', 'li', function (e){
        var $this = $(this);
        if (currentSlider !== $this.index()) {
          changePanel($this.index());
        };
      });
    }

    var SliderInit = function() {
      //SliderInterval = setInterval(pb.startSlider, pb.settings.duration);
      $("#barra").animate({
          width:"100%"
        }, 
        pb.settings.duration,
        "linear",
        pb.startSlider
      );                     
    }

    pb.startSlider = function() {
      $("#barra").css("width", 0);
      var panels = pb.items.panel,
          controls = $('#slider-controls li');

      if (nextSlider >= lengthSlider) {
        nextSlider = 0;
        currentSlider = lengthSlider-1;
      }

      // Efectos
      controls.removeClass('active').eq(nextSlider).addClass('active');
      panels.eq(currentSlider).fadeOut('slow');
      panels.eq(nextSlider).fadeIn('slow');

      // Actualizamos nuestros datos
      currentSlider = nextSlider;
      nextSlider += 1; 
      SliderInit();
    }

    // Funcion para controles del slider
    var changePanel = function(id) {
      //clearInterval(SliderInterval);
      $("#barra").stop().css("width", 0);
      var panels = pb.items.panel,
          controls = $('#slider-controls li');

      // Comprobamos el ID
      if (id >= lengthSlider) {
        id = 0;
      } else if (id < 0) {
        id = lengthSlider-1;
      }

      // Efectos
      controls.removeClass('active').eq(id).addClass('active');
      panels.eq(currentSlider).fadeOut('slow');
      panels.eq(id).fadeIn('slow');

      // Actualizamos nuestros datos
      currentSlider = id;
      nextSlider = id+1;

      // Reactivamos el slider
      SliderInit();
    }


    return pb;
  }());
  SliderModule.init({duration: 4000});
});
/*!
 * @Design slider
 */
* {
  margin: 0;
  padding: 0;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

img {
  height: auto;
  max-width: 100%;
}
 
ul li {
 list-style-type: none;
}
.slider-container{
  width:779px;
  height:448px;
  margin: 0 auto;
  background-color:#FFF;
}

.slider-wrapper {
  position: relative;
  z-index: 90;
  height: 360px;
  width: 100%;
}

.slider-wrapper li {
  display: none;
}

li.slide-current {
  display: block;
}

.slider-wrapper li img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: auto;
}

.slider-controls {
  text-align: center;
  margin-top: -125px;
  position: relative;
  z-index: 90;
}

.slider-controls li {
  background: #415066;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  display: inline-block;
  height: 12px;
  width: 12px;
  margin: 0 4px;
  cursor: pointer;
}

.slider-controls li.active {
  background: #00c5b9;	
} 

#barra {
  position:relative;
  margin-top:15px;
  height:10px;
  background:#00c5b9;
  width:0%;
  z-index:99;
} 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide"><!-- Root slide -->
  <div class="slider-container"><!-- Root slider container -->
    <ul id="slider" class="slider-wrapper">
      <li class="slide-current">
        <img src="http://themeinthebox.com/demo/color/images/slider/bg1.jpg" alt="" /></li>
        <li><img src="http://themeinthebox.com/demo/color/images/slider/bg2.jpg" alt="" /></li>
        <li><img src="http://themeinthebox.com/demo/color/images/slider/bg3.jpg" alt="" /></li>
    </ul>
    <ul id="slider-controls" class="slider-controls"></ul>
    <div id="barra"></div>
  </div><!-- End slider container -->
</div><!-- End slide -->

1
  • Agradezco por el tiempo dedicado a responder mi pregunta :)
    – Otto
    el 20 ago. 2016 a las 3:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.