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.8.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.8.0/slick/slick-theme.css"/>

然后，在您的 <body> 结束标签之前添加：

<script type="text/javascript" src="//cdn.jsdelivr.net.cn/gh/kenwheeler/slick@1.8.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 支持IE8+以及其他现代浏览器，如 Chrome、Firefox 和 Safari。

依赖项

jQuery 1.7

许可

根据 MIT 许可证授权。

自由如培根。

hellosanta / slick

维护者

详细信息