wake-up-neo.com

Reaktionsschnelle Haltepunkte funktionieren nicht für Slick-Slider

Ich habe einen Slick-Slider implementiert, der gut funktioniert, ohne die Größe des Browsers zu ändern. Wenn ich jedoch die Größe des Browsers auf 1024 ändere, funktionieren die Einstellungen für den reaktionsfähigen Haltepunkt nicht.

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
    }
  }]
});

Demo - https://jsfiddle.net/squidraj/hn7xsa4y/4/

Jede Hilfe wird sehr geschätzt.

3

Fügen Sie diese Einstellungen Ihrem Code hinzu.

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

Erstens existiert die Option "variableHeight" in Slick Carousel nicht.

Um Ihr Problem zu lösen, entfernen Sie variableWidth: true, da Ihre Dias dadurch mit dem Karussell voll werden. Sie können auch die Option "mobileFirst" nicht verwenden, wenn Ihre Seite diese Methode nicht verwendet.

Also sollte deine Konfiguration wie folgt aussehen

$('.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,
    }
  }]
});

Freundliche Grüße.

0
Ajmal

Zunächst verwenden Sie in Ihrem Beispiel die alte Version von Slick. Dieser Benutzer unterstützt die Eigenschaft mobileFirst nicht. Zweitens müssen Sie variableWidth entfernen, wenn Sie die Eigenschaft slidesToShow verwenden möchten. Dies funktioniert Geige https://jsfiddle.net/Kosyanenko/2boaw2h3/1/

Fügen Sie in jedem Haltepunkt die Optionen slidesToShow und slidesToScroll hinzu.

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

Das hat den Trick für mich getan.

    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);

Fügen Sie dies zu Ihrem js hinzu und rufen Sie den Schieberegler wie gezeigt auf.

und in deinem CSS die slidedisplay: inline-block; machen das wars. funktioniert auf allen ansprechenden Bildschirmen.

0
Sheraz Ahmed