分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 光滑的旋转木马不会调整大小，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

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

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

> main#slider-home .container .slider-session
>主要#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,centerMode: true,mobileFirst: true,pauSEOnHover: false,slidesToShow: 4
  });

这是我到目前为止所做的一切：

>取消激活除jQuery和Slick之外的所有脚本,以确保没有发生冲突;
>测试了不@R_453_11197@的jQuery;
>尝试包括jQuery Migrate;
>尝试在网站的标题中加载jQuery Slick;
>试图从容器中取出转盘;
>尝试在样式表上为carousel div设置宽度和最大宽度;
>尝试使用Slick的resize方法：

$(window).resize(function(){
$(‘#slider-home .slider-session’).slick(‘resize’);
});
>到处研究,甚至在插件的Github页面上打开一个问题.插件作者回答说,脚本肯定会调整大小,问题出在我的环境中,他是对的.我创建了一个静态HTML 页面进行测试,旋转木马100％响应.这个网站上有一些东西阻止了脚本的正常行为.

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

任何帮助真的很感激！我试图解决这个问题大约两周,至少,我不知道还有什么可以尝试.欢迎任何想法.谢谢！

解决方法

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

$('#seguradoras-carrousel .slider-session').slick({
    autoplay: true,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();