web-dev-qa-db-fra.com

Les points d'arrêt réactifs ne fonctionnent pas pour le slick slider

J'ai implémenté un slick slider qui fonctionne bien sans redimensionner le navigateur. Mais lorsque je redimensionne le navigateur à 1024, les paramètres de point d'arrêt réactif ne fonctionnent pas.

Jquery--

$('.slider').slick({
  centerMode: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  infinite: true,
  cssEase: 'linear',
  variableWidth: true,
  variableHeight: true,
  mobileFirst: true,
  responsive: [{
    breakpoint: 1024,
    settings: {
      slidesToShow: 4,
      slidesToScroll: 1,
      centerMode: false
    }
  }]
});

Démo - https://jsfiddle.net/squidraj/hn7xsa4y/4/

Toute aide est grandement appréciée.

jqueryresponsiveslick.jsfull-width
7
Prithviraj Mitra

Ajoutez ces paramètres à votre code;

$(".slides").slick({
    autoplay:true,
    mobileFirst:true,//add this one
}
9
Shady Kip

Ajoutez l'option slidesToShow et slidesToScroll dans chaque point d'arrêt.

 {
  breakpoint: 786,
    settings: {
              slidesToShow: 3,
              slidesToScroll: 1,
              }
 },
 {
  breakpoint: 568,
    settings: {
              slidesToShow: 2,
              slidesToScroll: 1
            }
  }
1
Soumitra Sarkar

Tout d'abord, l'option "variableHeight" n'existe pas dans Slick Carousel .

Pour résoudre votre problème, supprimez variableWidth: true, car cela rendra vos diapositives pleines avec le carrousel. Et vous ne pouvez pas non plus utiliser l'option "mobileFirst" si votre page n'utilise pas cette méthodologie.

Donc, finalement, votre configuration devrait être comme ceci, ci-dessous

$('.slider').slick({
  centerMode: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  infinite: true,
  cssEase: 'linear',
  mobileFirst: true, //optional, to be used only if your page is mobile first
  responsive: [{
    breakpoint: 1024,
    settings: {
      slidesToShow: 4,
      slidesToScroll: 1,
      centerMode: false,
    }
  }]
});

Meilleures salutations.

0
Ajmal

Tout d'abord, vous utilisez l'ancienne version de slick dans votre exemple. Ce verson ne prend pas en charge la propriété mobileFirst. Deuxièmement, vous devez supprimer variableWidth si vous souhaitez utiliser la propriété slidesToShow. Cela fonctionne violon https://jsfiddle.net/Kosyanenko/2boaw2h3/1/

0
Алексей Косьяненко

Cela a fait l'affaire pour moi.

    function resetSlick($slick_slider, settings) {
            $(window).on('resize', function() {
                if ($(window).width() < 320) {
                    if ($slick_slider.hasClass('slick-initialized')) {
                        $slick_slider.slick('unslick');
                    }
                    return
                }

                if (!$slick_slider.hasClass('slick-initialized')) {
                    return $slick_slider.slick(settings);
                }
            });
        }

 slick_slider = $('.client-logos');
    settings = {
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        prevArrow: '',
        nextArrow: '',
        pauseOnHover: true,

        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 5,
                    slidesToScroll: 1,
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]

    };
     slick_slider = $('.container');
    settings = {
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        prevArrow: '',
        nextArrow: '',
        pauseOnHover: true,

        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 5,
                    slidesToScroll: 1,
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]

    };
    slick_slider.slick(settings);
    resetSlick(slick_slider, settings);

Ajoutez ceci à votre js et appelez le curseur comme indiqué.

et dans votre css, faites le slidedisplay: inline-block; c'est tout. fonctionnera sur tous les écrans réactifs.

0
Sheraz Ahmed