Question

我已经实现了光滑的滑块，可以在不调整浏览器大小的情况下正常工作。但是，当我将浏览器调整为1024时，响应断点设置无效。

Jquery的 -

$('.slider').slick({
  centerMode: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  infinite: true,
  cssEase: 'linear',
  variableWidth: true,
  variableHeight: true,
  mobileFirst: true,
  responsive: [{
    breakpoint: 1024,
    settings: {
      slidesToShow: 4,
      slidesToScroll: 1,
      centerMode: false
    }
  }]
});

演示 - https://jsfiddle.net/squidraj/hn7xsa4y/4/

非常感谢任何帮助。

Answer 1

将此设置添加到您的代码中;

＆＃13;

  $(".slides").slick({
       
        autoplay:true,
        mobileFirst:true,//add this one
        }

＆＃13;

Answer 2

首先，在您的示例中使用旧版本的光滑版。本节不支持mobileFirst属性。其次，如果要使用variableWidth属性，则必须删除slidesToShow。这是工作小提琴https://jsfiddle.net/Kosyanenko/2boaw2h3/1/

Answer 3

这对我有用。

    function resetSlick($slick_slider, settings) {
            $(window).on('resize', function() {
                if ($(window).width() < 320) {
                    if ($slick_slider.hasClass('slick-initialized')) {
                        $slick_slider.slick('unslick');
                    }
                    return
                }

                if (!$slick_slider.hasClass('slick-initialized')) {
                    return $slick_slider.slick(settings);
                }
            });
        }

 slick_slider = $('.client-logos');
    settings = {
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        prevArrow: '',
        nextArrow: '',
        pauseOnHover: true,

        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 5,
                    slidesToScroll: 1,
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]

    };
     slick_slider = $('.container');
    settings = {
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        prevArrow: '',
        nextArrow: '',
        pauseOnHover: true,

        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 5,
                    slidesToScroll: 1,
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1
                }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]

    };
    slick_slider.slick(settings);
    resetSlick(slick_slider, settings);

将此添加到您的js并调用滑块，如图所示。

并在你的css中制作slide display: inline-block;就是这样。将适用于所有响应式屏幕。

Answer 4

在每个断点中添加slidesToShow和slidesToScroll选项。

 {
  breakpoint: 786,
    settings: {
              slidesToShow: 3,
              slidesToScroll: 1,
              }
 },
 {
  breakpoint: 568,
    settings: {
              slidesToShow: 2,
              slidesToScroll: 1
            }
  }

Answer 5

首先，Slick Carousel中不存在“ variableHeight”选项。

要解决您的问题，请删除variableWidth: true，因为这将使您的幻灯片充满轮播。如果您的网页未使用此方法，则也不能使用“ mobileFirst”选项。

所以最后，您的配置应如下所示

$('.slider').slick({
  centerMode: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  infinite: true,
  cssEase: 'linear',
  mobileFirst: true, //optional, to be used only if your page is mobile first
  responsive: [{
    breakpoint: 1024,
    settings: {
      slidesToShow: 4,
      slidesToScroll: 1,
      centerMode: false,
    }
  }]
});

最好的问候。

Answer 6

我不确定为什么你的js模板失败了，如下所示：

 responsive: [{
    breakpoint: 1024,

我会跟进他们的文档，社区或提交错误。

在任何情况下，使用CSS3 media queries都是更好的做法。一种方法;在滑块周围嵌套div并将其定位relative，使用width: 100%;缩放它的子元素并声明max和min width'在定义的分辨率内。这应该让你朝着正确的方向前进。确保也正确使用meta viewport。

响应断点不适用于光滑的滑块

6 个答案: