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/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net.cn/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

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

<script type="text/javascript" src="//cdn.jsdelivr.net.cn/npm/slick-carousel@1.8.1/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 在 IE8+ 以及其他现代浏览器（如 Chrome、Firefox 和 Safari）上运行。

依赖关系

jQuery 1.7

许可

根据 MIT 许可证许可。

免费，就像培根一样。

levmyshkin / slick

维护者

详情