光滑的JS排水沟或传送带项目之间的空间

Slick JS gutters or spaces between carousel items

本文关键字：项目 之间 传送带 空间 排水沟 JS      更新时间：2023-09-26

如何在slick.js中的轮播项目之间放置排水沟或空格?下面是我的js和html，滑块图像或项目之间没有空格。

 $('.responsive').slick({
     slidesToShow: 4,
     slidesToScroll: 4,
     responsive: [
     {
        breakpoint: 1024,
        settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
     }
     },
    ]
    });

<div class="responsive">
  <div> <img src="slide1.jpeg"></div>
  <div> <img src="slide2.jpeg"></div>
  <div> <img src="slide3.jpeg"></div>
  <div> <img src="slide4.jpeg"></div>
  <div> <img src="slide5.jpeg"></div>
</div>

没有一个插件选项可以通过Slick本身来定义这个。这是一个CodePen Slick.js的carousel示例，你会看到carousel间距是通过CSS通过margin和padding属性定义的(在这种情况下通过<h3>标签)。http://codepen.io/saviaga/pen/qdENOx

css: 

.responsive div img{ 
    margin: 10px;
}
相关文章：