Question

从文档中，数据属性就像这样工作

data-slick='{"dots": true}'

对于这个jquery版本

$('.one-time').slick({
  dots: true,
});

但是对于更复杂的设置，应该如何编写数据属性？说

        $('.center').slick({
         dots: true,
         responsive: [
        {
          breakpoint: 768,
          settings: {
            arrows: false,
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 3
          }
        },
        {
          breakpoint: 480,
          settings: {
            arrows: false,
            centerMode: true,
            centerPadding: '40px',
            slidesToShow: 1
          }
        }
      ]
    });

Answer 1

只是有同样的问题，评论有所帮助，但它没有奏效。在github repo上发现了这个问题：https://github.com/kenwheeler/slick/issues/1857

因此，您的html标记将数据属性设置设置为光滑滑块，如下所示：

<div class="slick-slider" 
     data-slick="{
         "dots": true,
         "responsive": [
        {
          "breakpoint": 768,
          "settings": {
            "arrows": false,
            "centerMode": true,
            "centerPadding": "40px",
            "slidesToShow": 3
          }
        },
        {
          "breakpoint": 480,
          "settings": {
            "arrows": false,
            "centerMode": true,
            "centerPadding": "40px",
            "slidesToShow": 1
          }
        }
      ]
     }">

     <!-- Slides -->

</div>

光滑滑块额外选项作为数据属性

1 个答案: