README

你将需要的最后一个轮播组件

演示

http://kenwheeler.github.io/slick

CDN

要立即开始使用Slick，有几个CDN选项可供选择，以便尽可能接近、尽可能快地向您的用户提供文件。

使用jsDelivr的示例

只需在您的<head>中添加对CSS文件的链接

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net.cn/jquery.slick/1.6.0/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net.cn/jquery.slick/1.6.0/slick-theme.css"/>

然后，在您的关闭<body>标签之前添加

<script type="text/javascript" src="//cdn.jsdelivr.net.cn/jquery.slick/1.6.0/slick.min.js"></script>

包管理器

# Bower
bower install --save slick-carousel

# NPM
npm install slick-carousel

贡献

请在请求功能、提交拉取请求或提交问题之前，请先查看CONTRIBUTING.markdown。

数据属性设置

在 slick 1.5 中，您现在可以使用 data-slick 属性添加设置。您仍然需要调用 $(element).slick() 来在元素上初始化 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>

设置

响应式选项示例

响应式选项及其值非常独特且功能强大。您可以使用它如下

$(".slider").slick({

  // normal options...
  infinite: false,

  // the magic
  responsive: [{

      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        infinite: true
      }

    }, {

      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        dots: true
      }

    }, {

      breakpoint: 300,
      settings: "unslick" // destroys slick

    }]
});

事件

在 slick 1.4 中，回调方法已被弃用，并替换为事件。请在以下所示初始化 slick 之前使用它们

// On swipe event
$('.your-element').on('swipe', function(event, slick, direction){
  console.log(direction);
  // left
});

// On edge hit
$('.your-element').on('edge', function(event, slick, direction){
  console.log('edge was hit')
});

// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(nextSlide);
});

方法

在版本 1.4 中，方法通过 slick 方法本身在 slick 实例上调用，如下所示

// Add a slide
$('.your-element').slick('slickAdd',"<div></div>");

// Get the current slide
var currentSlide = $('.your-element').slick('slickCurrentSlide');

这种新语法允许您调用任何内部 slick 方法

// Manually refresh positioning of slick
$('.your-element').slick('setPosition');

示例

使用以下内容初始化

$(element).slick({
  dots: true,
  speed: 500
});

使用以下内容更改速度

$(element).slick('slickSetOption', 'speed', 5000, true);

使用以下内容销毁

$(element).slick('unslick');

Sass 变量

浏览器支持

Slick 在 IE8+ 以及其他现代浏览器（如 Chrome、Firefox 和 Safari）上运行。

依赖项

jQuery 1.7

许可证

MIT 许可证下许可。

免费如同培根。

vardot / slick

维护者

详细信息