滑块：设置滑块显示的限制

Question

如何限制滑块。例如，如果数据库包含超过14个图像，滑块将只显示总共不超过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
      }
    }

  ]
});
        

Answer 1

限制是你造成的。如果你看到slick网站上的例子

<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;

并为每个循环动态地生成DIV（您的内容），例如通过php。

在没有数据库的情况下，只要在前端使用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()
  }
});

参见我的小提琴:https://jsfidle.net/bogatyr77/9ojvu7lh/23//