Deshabilitar Swiper Slider si solo hay 1 diapositiva

La guía paso a paso o código que encontrarás en este artículo es la resolución más eficiente y válida que encontramos a esta duda o dilema.

Solución:

Hay una opción en Swiper API que podría ser útil:

watchOverflow (boolean|false)
// When enabled Swiper will be disabled and hide navigation buttons on case there are not enough slides for sliding

Yo también estaba buscando una forma de hacerlo, pero como no encontré ninguna forma “oficial” de desactivar el deslizamiento y ocultar los buscapersonas, decidí improvisar un poco.

Entonces, en su secuencia de comandos, puede agregar esto después de su variable Swiper:

JS:

if($(".slider .slide").length == 1) 
    $('.swiper-wrapper').addClass( "disabled" );
    $('.swiper-pagination').addClass( "disabled" );

Esto agregará la clase disabled a su contenedor y su paginación si solo hay una diapositiva en su control deslizante. Ahora puede agregar algo de CSS para omitir los efectos de Swiper:

CSS:

.swiper-wrapper.disabled 
    transform: translate3d(0px, 0, 0) !important;

.swiper-pagination.disabled 
    display: none;

Tenga en cuenta que esto solo funcionará cuando el bucle esté configurado en false (como en tu caso). Si el ciclo está activo, Swiper agregará diapositivas duplicadas antes y después de su única diapositiva, haciendo un total de 3 diapositivas idénticas. A continuación, puede cambiar el length == 1 a length == 3.

¡Espero que esto ayude!

Una de las opciones sería agregar opciones condicionalmente, como se muestra a continuación:

    let options = ;

    if ( $(".swiper-container .swiper-slide").length == 1 ) 
        options = 
            direction: 'horizontal',
            loop: false,
            autoplayDisableOnInteraction: false,

            keyboardControl: true,
            mousewheelControl: true,

            pagination: '.swiper-pagination',
            paginationClickable: true,
        
     else 
        options = 
            loop: false,
            autoplay: false,
        
    

    var swiper = new Swiper('.swiper-container', options);

Aquí tienes las reseñas y valoraciones

Si entiendes que te ha resultado de provecho este post, sería de mucha ayuda si lo compartes con otros programadores y nos ayudes a dar difusión a este contenido.

---

---

Utiliza Nuestro Buscador