web-dev-qa-db-fra.com

Points d'arrêt sensibles au carrousel

Il s'agit de la configuration que j'utilise pour créer un carrousel lisse sur ma page Web.

$('#carousel').slick({
                      infinite: true,
                      slidesToShow: 3,
                      slidesToScroll: 1,
                      arrows: true,
                      autoplay: true,
                      autoplaySpeed: 2000,
                      responsive: [
                            {
                              breakpoint: 1200,
                              settings: {
                                slidesToShow: 2,
                                slidesToScroll: 1
                              }
                            },
                            {
                              breakpoint: 1008,
                              settings: {
                                slidesToShow: 1,
                                slidesToScroll: 1
                              }
                            },
                            {
                              breakpoint: 800,
                              settings: "unslick"
                            }

                          ]
            });

Il fonctionne comme il est censé fonctionner, sauf pour une chose, lorsque je redimensionne la fenêtre de mon navigateur de 1920 à 800, le carrousel se débloque et le contenu s'affiche comme les div normales, mais quand j'augmente la largeur de la fenêtre du navigateur le carrousel ne recrée pas. Il reste comme des blocs HTML div sans carrousel.

Toute aide serait appréciée.

javascriptjqueryslick.js
9
void

unslick est une méthode destructrice. Une fois que vous avez décroché, vous devez à nouveau appeler slick () pour construire le carrousel.

7
Peter Wong

C'est une façon de reconstruire le carrousel après l'avoir supprimé à un point d'arrêt:

$(window).resize(function () {
    $('.js-slider').not('.slick-initialized').slick('resize');
});

$(window).on('orientationchange', function () {
    $('.js-slider').not('.slick-initialized').slick('resize');
});
4
Beck Johnson

Sur chaque événement de redimensionnement du navigateur, vous devez vérifier et réinitialiser le curseur Slick si nécessaire (si vous êtes sur mobile et que le curseur Slick n'est pas initialisé).

/* Get element */
var slider = $('.slider');

/* Slider settings */
var settings = {...}

/* Do this every time window gets resized */
$(window).on('resize', function() {

   /* If we are above mobile breakpoint unslick the slider */
   if ($(window).width() >= 800) 
   {
      /* Do this only if slider is initialized */
      if (slider.hasClass('slick-initialized')) {
         slider.slick('unslick');
      }
      return;
   }
   /* We are below mobile breakpoint, initialize the slider
      if it is not already initialized */
   else if (!slider.hasClass('slick-initialized')) 
   {
      return slider.slick(settings);
   }
}

$(window).trigger('resize');
1
Mato
<section class="regular slider" style="direction:ltr">
    <div>
        <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=2">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=3">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=4">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=6">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=3">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=4">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=6">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=7">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=8">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=9">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=10">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=11">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=12">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=13">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=14">
    </div>
</section>

///// script ///// 

    $(document).on('ready', function() {

      $(".regular").slick({
        dots: false,
        infinite: true,
        slidesToShow: 6,
        slidesToScroll: 6,
        autoplay: true,
        autoplaySpeed: 2000,

          pauseOnHover: true,

        responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 5,
                slidesToScroll: 5,
            }
        },
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        }

  ]


      }); 
    });
0
سیدرسول میرعظیمی