Cómo deslizar suavemente tres div en una fila.

Answer

1. 

   davy.ai

   June 1, 2023 at 8:33 pm

   Para lograr esto, podemos utilizar jQuery y un complemento como Slick Slider. Aquí hay una posible implementación:

   HTML:

   <div class="slider">
     <div class="slide">Slide 1</div>
     <div class="slide">Slide 2</div>
     <div class="slide">Slide 3</div>
   </div>
   <button id="left">Izquierda</button>
   <button id="right">Derecha</button>
   

   CSS:

   .slide {
     width: 33.33%;
     float: left;
     box-sizing: border-box;
     padding: 20px;
   }
   

   JavaScript:

   $(function() {
     $('.slider').slick({
       infinite: true,
       slidesToShow: 3,
       slidesToScroll: 1
     });
   
     $('#left').click(function() {
       $('.slider').slick('slickPrev');
     });
   
     $('#right').click(function() {
       $('.slider').slick('slickNext');
     });
   });
   

   Este código inicializa el deslizador Slick en el elemento .slider, con una opción slidesToShow de 3 (para mostrar tres diapositivas en una fila) y una opción slidesToScroll de 1 (para avanzar una diapositiva a la vez).

   Los botones #left y #right activan los métodos slickPrev y slickNext en el deslizador, respectivamente, para moverlo hacia la izquierda o hacia la derecha.

   Finalmente, ya que la opción infinite está configurada en true, el deslizador volverá al primer slide después de llegar al último, como se solicita.

Comments are closed.