Slick：设置滑块显示的限制

如何解决Slick：设置滑块显示的限制

如何限制滑块。例如，如果数据库包含超过 14 个图像，则 slick 总共只会显示不超过 14 个滑块（顺序无关紧要）。然后使用断点。

$('.responsive').slick({
  dots: true,infinite: false,speed: 300,slidesToShow: 4,slidesToScroll: 4,responsive: [
    {
      breakpoint: 1024,settings: {
        slidesToShow: 3,slidesToScroll: 3,infinite: true,dots: true
      }
    },{
      breakpoint: 600,settings: {
        slidesToShow: 2,slidesToScroll: 2
      }
    },{
      breakpoint: 480,settings: {
        slidesToShow: 1,slidesToScroll: 1
      }
    }

  ]
});

解决方法

限制是你自己做的。如果您在漂亮的网站上看到示例

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

然后你初始化光滑的滑块

$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});

仅生成 14 个条目。所以滑块只会显示 14。如果你使用数据库查询做

SELECT 
    image
FROM
    imgtable
LIMIT 14;

并通过 php 为每个循环动态生成您的 div（您的内容）。

无需数据库，只需在前端与 JQuery 一起使用即可。

示例内容（超过 14 个）：

<div class="your-class">
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
  <div class="img">your content</div>
</div>

所以在 Jquery 中你使用

$('.img').each(function(index,value) {
  if (index > 13) {
    console.log('index',index);
    $(this).hide()
  }
});

看我的小提琴：manually