圆滑的旋转木马不会调整大小

Question

我正在开发的Wordpress网站上使用Slick.js轮播。当我调整浏览器窗口的大小时，轮播无法容纳它，导致显示水平滚动条。如果我不启动Slick，则图像会相应调整大小，就像您在流畅的布局中所期望的那样。

Slick动态注入一些内联样式，其中之一是宽度。您可以看到轮播的所有子div的宽度： 光滑的内联样式

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

这是网站的链接：http : //smart.trippple.com.br/

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

1. 主＃slider-home .container .slider-session
2. 主要#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的调整大小方法：

  $（window）.resize（function（）{$（'＃slider-home .slider-session'）。slick（'resize'）;}）;

• 进行研究，甚至在插件的Github页面上打开一个问题。插件作者回答说脚本肯定会调整大小，问题出在我的环境中，他是对的。我创建了一个静态HTML页面进行测试，轮播的响应速度为100％。该网站上有某些东西阻止了脚本的正常运行。

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

任何帮助都非常感谢！我至少要解决这个问题大约两个星期，而且我不知道还能尝试什么。任何想法都欢迎。谢谢！

Answer 1

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

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

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