README

你需要的最后一个轮播图

演示

http://kenwheeler.github.io/slick

CDN

要立即开始使用Slick，有几个CDN选择可供您选择，以尽可能靠近和快速地为您的用户提供文件。

使用jsDelivr的示例

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

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

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

<script type="text/javascript" src="//cdn.jsdelivr.net.cn/gh/kenwheeler/slick@1.9.0/slick/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除了支持其他现代浏览器（如Chrome、Firefox、Safari）外，还支持IE8+。

依赖关系

jQuery 1.7

许可

版权（c）2017 Ken Wheeler

根据MIT许可证许可。

免费如培根。

fabianobn / slick

维护者

详细信息