Question

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

Slick动态地注入一些内联样式，其中一个是宽度。你可以看到旋转木马的所有子div的宽度： Slick inline styles

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

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

主页有两个转盘，位于以下位置：

main＃slider-home .container .slider-session
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;
试图从容器中取出转盘;
尝试在样式表上为carousel 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），光滑的选项以及使其分解的大小（我将其设置为小于1150px）

Answer 2

我最近遇到了同样的问题，这就是我解决的方法。在调整大小或从窗口更改方向时，销毁该浮雕并再次创建它。

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

Answer 3

也许如果你强制光滑调整窗口大小调整大小，这将适合：

import React from 'react';
import '../../node_modules/materialize-css/sass/materialize.scss';

export default class App extends React.Component {
  render() {
    return (
      <div class="card-panel teal lighten-2">
        <h1> fad </h1>
      </div>
    )
  }
}

Answer 4

在我的情况下，我实际上缺少图像拉伸

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

Answer 5

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

调整大小或显示隐藏的滑块后为我工作。

此方法在官方文档中不可用。

Answer 6

$（'＃slick-slider'）。slick（'setDimensions'）;

带有$（'＃slick-slider'）。slick（'setPosition'）;

为我工作

光滑的轮播不会调整

6 个答案: