Estaba trabajando en un Swiper.js y tengo el siguiente HTML:
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="images/img1.jpg" alt=""> <div class="slide-text"> <h2>Slide One</h2> <a class="btn-slider" href="#">LEARN MORE →</a> </div> </div> <div class="swiper-slide"> <img src="images/img2.jpg" alt=""> <div class="slide-text"> <h2>Slide Two</h2> <a class="btn-slider" href="#">LEARN MORE →</a> </div> </div> <div class="swiper-slide"> <img src="images/img3.jpg" alt=""> <div class="slide-text"> <h2>Slide Two</h2> <a class="btn-slider" href="#">LEARN MORE →</a> </div> </div> </div>De forma predeterminada, tendrá el siguiente JS para que funcione:
var swiper = new Swiper(".swiper-container", { autoplay: { slidesPerView: 1, disableOnInteraction: false, }, });Me preguntaba si es posible obligar a Swiper.js a mostrar solo una diapositiva en la ventana gráfica móvil en lugar de mostrar las 3 diapositivas en el móvil.
SÍ, puede usar el objeto de puntos de interrupción junto con su reproducción automática, así
var swiper = new Swiper(".swiper-container", { autoplay: { slidesPerView: 1, disableOnInteraction: false, }, breakpoints: { 640: { slidesPerView: 1, spaceBetween: 20, }, 768: { slidesPerView: 2, spaceBetween: 40, }, 1024: { slidesPerView: 3, spaceBetween: 50, }, }, });Aquí está el ejemplo de documentación para controles deslizantes receptivos