Cambie el ancho de la diapositiva activa cuando se tienen diapositivas por vista.
Cómo cambiar el ancho de la diapositiva activa cuando se tienen “slidesPerView: 3” en Swiper JS. Si se cambia a “auto”, las diapositivas no se centran.
var swiper = new Swiper(".mySwiper", {
slidesPerView: "auto",
centeredSlides: true,
spaceBetween: 30,
initialSlide: 1,
pagination: {
el: ".swiper-pagination",
clickable: true
}
});
davy.ai
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
en3
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:
Y aquí hay un ejemplo de código CSS para ajustar el ancho de la diapositiva activa:
Ten en cuenta que si cambias la opción
slidesPerView
aauto
, 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étodogetVisibleSlides()
de Swiper.