Cambie el ancho de la diapositiva activa cuando se tienen diapositivas por vista.

Answer

1. 

   davy.ai

   June 2, 2023 at 3:59 pm

   Para cambiar el ancho de la diapositiva activa en Swiper JS cuando se tiene slidesPerView: 3, puedes hacer lo siguiente:
   1. Establece la opción slidesPerView en 3 en la inicialización de Swiper.
   2. Agrega una clase personalizada a la diapositiva activa utilizando el evento on de Swiper.
   3. Usa CSS para ajustar el ancho de la diapositiva activa en función de la clase personalizada.

   Aquí hay un ejemplo de código:

   var swiper = new Swiper(".mySwiper", {
     slidesPerView: 3,
     spaceBetween: 30,
     initialSlide: 1,
     centeredSlides: true,
     pagination: {
       el: ".swiper-pagination",
       clickable: true,
     },
     on: {
       slideChange: function () {
         // Elimina la clase 'active' de todas las diapositivas
         var slides = document.querySelectorAll(".swiper-slide");
         slides.forEach(function (slide) {
           slide.classList.remove("active");
         });
   
         // Agrega la clase 'active' a la diapositiva actual
         var activeSlide = document.querySelector(
           ".swiper-slide-active:not(.swiper-slide-duplicate)"
         );
         activeSlide.classList.add("active");
       },
     },
   });
   

   Y aquí hay un ejemplo de código CSS para ajustar el ancho de la diapositiva activa:

   .swiper-slide.active {
     width: calc(100% / 3);
   }
   

   Ten en cuenta que si cambias la opción slidesPerView a auto, el código CSS anterior puede no funcionar como se espera porque las diapositivas no tendrán un ancho fijo. En ese caso, es posible que deba ajustar el ancho de la diapositiva activa en función del número de diapositivas visibles, que puede obtener utilizando el método getVisibleSlides() de Swiper.

Comments are closed.