Slick-Karussell ändert die Größe nicht

Ich verwende Slick.js Karussell auf einer WordPress-Site, die ich entwickle. Wenn ich die Größe des Browserfensters verändere, passen die Karussells nicht hinein, was dazu führt, dass horizontale Bildlaufleisten angezeigt werden. Wenn ich Slick nicht starte, wird die Größe der Bilder entsprechend angepasst, wie Sie es in einem flüssigen Layout erwarten würden.

Slick fügt einige Inline-Stile dynamisch ein, und einer davon ist die Breite. Sie können die Breite aller untergeordneten Divs des Karussells sehen:
Glatte Inline-Stile

Das normale Verhalten von Slick besteht darin, diese Breiten zu aktualisieren, wenn Sie die Größe des Fensters ändern, aber aus irgendeinem Grund wird dies auf dieser Site nicht passieren.

Hier ist der Link zur Webseite: http://smart.trippple.com.br/

Die Homepage hat zwei Karussells, die sich an diesen Positionen befinden:

1. main #slider-home .container .slider-session
2. main #seguradoras .container #seguradoras-carrousel .slider-session

So initiiere ich das Skript:

  $('#slider-home .slider-session').slick({
    autoplay: true,
    autoplaySpeed: 5000,
    arrows: false,
    fade: true,
    slidesToScroll: 1,
    slidesToShow: 1,
    speed: 1000
  });

  $('#seguradoras-carrousel .slider-session').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    centerMode: true,
    mobileFirst: true,
    pauseOnHover: false,
    slidesToShow: 4
  });

Und hier ist alles, was ich bisher versucht habe:

• Alle Skripte außer jQuery und Slick deaktiviert, um sicherzustellen, dass kein Konflikt stattfindet;
• Getestet verschiedene Versionen von jQuery;
• Versucht, einschließlich jQuery Migrate;
• Versucht, jQuery + Slick in den Header der Website zu laden;
• Versucht, die Karussells aus dem Container zu entfernen;
• Ich habe versucht, eine Breite und eine maximale Breite für das Karussell-Div in meinem Stylesheet festzulegen.

• Versucht, die Größenänderungsmethode von Slick zu verwenden:

  $(window).resize(function() { $(‘#slider-home .slider-session’).slick(‘resize’); });

• Überall recherchieren und sogar ein Problem auf der Github-Seite des Plugins öffnen. Der Plugin-Autor antwortete, dass das Skript definitiv die Größe ändert und das Problem in meiner Umgebung liegt, und er hat Recht. Ich habe zum Testen eine statische HTML-Seite erstellt, und das Karussell reagierte zu 100 %. Es gibt etwas auf dieser Website, das das normale Verhalten des Skripts verhindert.

Übrigens werden die Stylesheets von Slick nicht verlinkt, da ich sie in das Haupt-Stylesheet der Site eingebettet habe.

Jede Hilfe ist sehr willkommen! Ich versuche, das mindestens zwei Wochen lang zu lösen, und ich weiß nicht, was ich sonst noch versuchen soll. Alle Ideen sind willkommen. Vielen Dank!

hast du mal die responsive Option von Slicks ausprobiert? Ich weiß nicht, ob dies die Antwort ist, nach der Sie suchen, aber das ist, was ich tue, damit mein Schieberegler basierend auf der Größenänderung des Browsers funktioniert.

$('#seguradoras-carrousel .slider-session').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    centerMode: true,
    mobileFirst: true,
    pauseOnHover: false,
    slidesToShow: 4,
    //start responsive option
    responsive: [
    {
      breakpoint: 600, //at 600px wide, only 2 slides will show
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480, //at 480px wide, only one slide will show
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    ]
});

Aktualisiert, um an der Größenänderung statt an der Aktualisierung zu arbeiten

Sie benötigen zwei Funktionen, eine Größenänderungsfunktion und eine Slick-Funktion

jQuery(window).on('resize', function() {

  clearTimeout(resizeTimerInternal)

  resizeTimerInternal = setTimeout(function() {
    //add functions here to fire on resize
    slickSliderWithResize();
  }, 100)

});


function slickSliderWithResize() {
  if (jQuery(window).width() < 1150) {
    if(jQuery('.slick-slider-wrapper').hasClass('slick-initialized')) {

    }
    else {
      jQuery('.slick-slider-wrapper').slick({
        // slick options
      });
    }
  } else {
    if(jQuery('.slick-slider-wrapper').hasClass('slick-initialized')) {
      jQuery('.slick-slider-wrapper').slick("unslick");
    }
  }
}
slickSliderWithResize();

Dies sollte bei der Größenänderung funktionieren, aber Sie müssen es ein wenig bearbeiten, damit es zu Ihrem Schieberegler passt. den Namen des Slider-Containers (ich habe ihn gerade Slick-Slider-Wrapper genannt), die Slick-Optionen und die Größe, in der er zerlegt werden soll (ich habe ihn auf weniger als 1150 Pixel eingestellt).

$('#slick-slider').slick('setDimensions');

Funktioniert für mich, nachdem die Größe geändert oder ein versteckter Schieberegler angezeigt wurde.

Diese Methode ist in der offiziellen Dokumentation nicht verfügbar.

Wenn Sie Slick zwingen, die Größe bei der Fenstergröße zu ändern, würde dies vielleicht passen:

$(window).resize(function() {
  $('#slider-home .slider-session').slick('resize');
  $('#seguradoras-carrousel .slider-session').slick('resize');
});

In meinem Fall fehlte mir tatsächlich die Bildstreckung

.slick-slide img {width: 100%;}

Ich hatte vor kurzem das gleiche Problem und habe es so gelöst. Zerstören Sie beim Größen- oder Ausrichtungsänderungsereignis des Fensters den Slick und erstellen Sie ihn erneut.

var slickOptions = {
    arrows: false,
    dots: true,
    adaptiveHeight: true,
    mobileFirst: true
};

$('.slick-element').slick(slickOptions);

$(window).on('resize orientationchange', function() {
    $('.slick-element').slick('unslick');
    $('.slick-element').slick(slickOptions);
});

$(‘#slick-slider’).slick(‘setDimensions’);

mit $(‘#slick-slider’).slick(‘setPosition’);

Funktioniert bei mir