Cómo construir un control deslizante de imagen con jQuery

Programación

Este tutorial lo guiará a través de la construcción de un control deslizante de imágenes utilizando la biblioteca jQuery.

GIF que muestra Slider en acción

Este tutorial tendrá cuatro partes:

  • HTML
  • SCSS
  • JS
  • Referencias

HTML

Usaremos Bootstrap para este tutorial para que las cosas se vean bien, sin perder mucho tiempo.

Nuestra estructura será la siguiente:

    Dentro de nuestro ulcon la clase de slidestendremos lo siguiente:

    • Dentro de nuestra .buttonsclase deberías tener lo siguiente:

    Aquí hay un ejemplo de cómo htmldebería verse:

    Nota: debe reemplazar el srcatributo de imagen con su propio contenido.

    
    
      
     
      • 
     
      • 
     
      • 
     
      • 
     
      •

    SCSS

    Estamos usando Sass y la sintaxis SCSS para poder anidar y usar variables

    : decoración_corazón:

    Podemos usar el siguiente SCSS para definir nuestro estilo:

    // Variables $width: 720px; .slider { width: $width; height: 400px; overflow: hidden; margin: 0 auto; text-align: center; .slides { display: block; width: 6000px; height: 400px; margin: 0; padding: 0; } .slide { float: left; list-style-type: none; width: $width; height: 400px; img { width: 100%; height: 100%; } } } .buttons { margin: 0; width: $width; position: relative; top: -40px; margin: 0 auto; .play { display: none; } .btn { display: flex; margin: 0 auto; text-align: center; } }

    JS

    Variables

    En el siguiente fragmento de código, definimos las variables que se usarán más adelante en nuestro código.

    var animationSpeed = 1000; // How quickly the next slide animates. var pause = 3000; // The pause between each slide.

    Usaremos una variable en blanco donde llamaremos al setIntervalmétodo:

    var interval;

    Animación Envolveremos nuestras animaciones deslizantes dentro de una función:

    function startSlider() {}

    Estamos utilizando el setInterval()método JavaScript nativo para automatizar el contenido de la función en un disparador basado en el tiempo.

    interval = setInterval(function() {}, pause);

    Usamos la pausevariable para ver cuántos milisegundos esperar antes de volver a llamar a la función. Lea más sobre el setIntervalmétodo nativo aquí: //developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval. Dentro de nuestra función usaremos jQuery para desvanecer entre diapositivas a la velocidad de la variable animationSpeed:

    $('.slides > li:first') .fadeOut(animationSpeed) .next() .fadeIn(animationSpeed) .end() .appendTo('.slides');

    Estamos apuntando a la primera diapositiva usando $('.slides > li:first'). - .fadeOut(animationSpeed)Desvanecerá la primera diapositiva y luego .next(), usando , pasamos a la siguiente diapositiva. - Una vez que se ha pasado a la siguiente diapositiva, vamos a desaparecer en: .fadeIn(animationSpeed). - Esta secuencia continuará hasta la última diapositiva ( .end()), luego paramos la animación. Ahora llamaremos a la startSliderfunción para iniciar la animación:

    startSlider ();

    Reproducir y pausar Esta función es opcional, pero bastante fácil de implementar. Ocultaremos el botón de reproducción, por lo que no veremos los botones de reproducción y pausa:

    $('.play').hide(); // Hiding the play button.

    Ahora crearemos nuestro botón de pausa (que se muestra automáticamente al cargar la página):

    $('.pause').click(function() { clearInterval(interval); $(this).hide(); $('.play').show(); });

    We will call our function every time the pause button is clicked using jQuery. - We will remove the interval using the clearInterval method and using our interval variable as the parameter, indicating which interval to stop. - Because our slider is paused, we will hide the pause button using $(this).hide();. Note: we are using this, which will refer to what our parent is calling i.e. .pause. - We will then show our play button so the user can resume the animation: $('.play').show();. The following code sets up our play button (automatically hidden on page load):

    $(‘.play’).click(function() { startSlider(); $(this).hide(); $(‘.pause’).show(); });

    We will call our function every time the play button is clicked using jQuery.

    • We will start or restart the interval using the startSlider function.
    • Debido a que nuestro control deslizante se está reproduciendo actualmente, ocultaremos el botón de reproducción usando $(this).hide();. Nota: estamos usando this, que se referirá a lo que llama nuestro padre, es decir .play.
    • Entonces vamos a mostrar nuestro botón de pausa para que el usuario puede detener la animación a voluntad: $('.pause').show();.

    Referencias

    • Consulte el código fuente y el ejemplo en CodePen para este tutorial.