Question

如何使用一个功能制作多个光滑滑块？例如数据属性;

div class="my-slick" data-item="3"

div class="my-slick" data-item="4"

div class="my-slick" data-item="6"

$('.my-slick').slick();

Answer 1

希望以下代码适合您

<code>
$('.my-slick').each( function() {
 var slick = $(this),
  item =  $(this).data('item');

 slick.slick({
  slidesToShow: item,
  responsive: [
     {
      breakpoint: 480,
      settings: {
         slidesToShow: item < 2 ? item: 1,
       }
     }
   ]
 });
});
</code>

Answer 2

在slick 1.5中，您现在可以使用data-slick属性添加设置。您仍然需要调用$（element）.slick（）来初始化元素上的滑动。

<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
  <div><h3>1</h3></div>
  <div><h3>2</h3></div>
  <div><h3>3</h3></div>
  <div><h3>4</h3></div>
  <div><h3>5</h3></div>
  <div><h3>6</h3></div>
</div>

您可以在http://kenwheeler.github.io/slick/和https://github.com/kenwheeler/slick/tree/master/slick上找到更多信息

光滑滑块的数据属性

2 个答案: