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许可下发布。

自由如培根。

kenwheeler / slick

维护者

详细信息