jquery - 光滑的轮播不会调整大小

Question

我正在开发的 WordPress 网站上使用 Slick.js 轮播。当我调整浏览器窗口大小时，轮播将不适合它，导致出现水平滚动条。如果我不启动 Slick，图像会相应地调整大小，正如您在流体布局中所期望的那样。

Slick动态注入(inject)一些内联样式，其中之一就是宽度。您可以看到轮播的所有子 div 的宽度: Slick inline styles

Slick 的正常行为是在您调整窗口大小时更新这些宽度，但由于某种原因，此网站上不会发生这种情况。

以下是网站链接:http://smart.trippple.com.br/

主页有两个轮播，位于以下位置:

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

这就是我启动脚本的方式:

  $('#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
  });

这是迄今为止我尝试过的所有内容:

• 停用了除 jQuery 和 Slick 之外的所有脚本，以确保不会发生冲突；
• 测试了不同版本的 jQuery；
• 尝试包括 jQuery Migrate；
• 尝试在网站标题中加载 jQuery + Slick；
• 尝试从容器中取出传送带；
• 尝试在样式表上设置轮播 div 的宽度和最大宽度；

• 尝试使用 Slick 的调整大小方法:

  $(窗口).调整大小(函数() { $('#slider-home .slider-session').slick('调整大小'); });

• 到处研究，甚至在插件的 Github 页面上提出问题。插件作者回复说，脚本肯定会调整大小，问题出在我的环境中，他是对的。我创建了一个静态 HTML 页面来测试，轮播是 100% 响应的。该网站上的某些内容阻止了脚本的正常行为。

顺便说一句，您不会看到 Slick 的样式表链接，因为我将它们嵌入到网站的主样式表中。

非常感谢任何帮助!我至少花了大约两周的时间来解决这个问题，但我不知道还能尝试什么。欢迎任何想法。谢谢!

Answer 1

您尝试过光滑响应选项吗？我不知道这是否是您正在寻找的答案，但这就是我所做的让我的 slider 根据浏览器调整大小工作。

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

更新为调整大小而不是刷新

您需要两个函数，一个调整大小函数和一个平滑函数

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

这应该适用于调整大小，但您需要对其进行一些编辑以适合您的 slider 。 slider 容器的名称(我刚刚将其命名为 slick-slider-wrapper)、slick 选项以及分解的大小(我将其设置为小于 1150px)