Hubo un gran problema con Swiper.js
¿Es posible volver a hacer que el ancho de las diapositivas sea igual al ancho del contenido?
Por el momento, todas las diapositivas se extienden hasta el ancho completo de la diapositiva principal, muy probablemente porque configuré el elemento de cuadrícula del contenedor
¡He estado tratando de resolver el problema durante mucho tiempo, pero no puedo decirme que se lo agradeceré!
(captura de pantalla adjunta) ingrese la descripción de la imagen aquí
flex-shrink: 100 !important; width: **set according to your design**;¡Funciona!
El mismo problema intente desmarcar flex-shrink: 0
Hasta donde yo sé, no existe una forma estándar de hacer que el ancho de las diapositivas sea igual al ancho del contenido. Pero, puede especificar el ancho deseado para cada diapositiva manualmente en su archivo CSS como se muestra a continuación:
HTML:
<!-- Slider main container --> <div class="swiper"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- If we need scrollbar --> <div class="swiper-scrollbar"></div> </div>CSS:
.swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .swiper-slide { width: 50%; } .swiper-slide:nth-child(2n) { width: 20%; } .swiper-slide:nth-child(3n) { width: 40%; }Importa también estas dos líneas de código en tu archivo CSS:
swiper/css swiper/css/bundleJS:
const swiper = new Swiper('.swiper', { speed: 400, spaceBetween: 100, });