0

slick

你需要的最后一个轮播。(the last carousel you'll ever need.)

官方网站
Github 资源库
主要指标

Github星跟踪图

你需要的最后一个轮播。

slick特性：

  • 充分响应。 用它的容器称。
  • 每个断点单独设置
  • 在可用时使用CSS3。 不完全功能。
  • 已启用滑动。 或禁用，如果你喜欢。
  • 桌面鼠标拖动
  • 无限循环。
  • 可通过箭头键导航完全访问
  • 添加，删除，过滤和过滤幻灯片
  • 自动播放，点，箭头，回调等...
浏览器支持
  • Slick适用于IE8 +以及其他现代浏览器，如Chrome，Firefox和Safari。
依赖
  • jQuery 1.7+

主要指标

概览
名称与所有者kenwheeler/slick
主编程语言JavaScript
编程语言Makefile (语言数: 7)
平台Cross-platform, Web browsers
许可证MIT License
所有者活动
创建于2014-03-24 02:10:05
推送于2025-06-23 14:09:51
最后一次提交2025-06-23 17:09:51
发布数51
最新版本名称v1.8.1 (发布于 2017-10-03 13:49:29)
第一版名称1.0.0 (发布于 )
用户参与
星数28.6k
关注者数544
派生数5.9k
提交数1k
已启用问题?
问题数3618
打开的问题数1207
拉请求数255
打开的拉请求数181
关闭的拉请求数267
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?

slick

the last carousel you'll ever need

Demo

http://kenwheeler.github.io/slick

CDN

To start working with Slick right away, there's a couple of CDN choices availabile
to serve the files as close, and fast as possible to your users:

Example using jsDelivr

Just add a link to the css file in your <head>:

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

Then, before your closing <body> tag add:

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

Package Managers

# Bower
bower install --save slick-carousel

# NPM
npm install slick-carousel

Contributing

PLEASE review CONTRIBUTING.markdown prior to requesting a feature, filing a pull request or filing an issue.

Data Attribute Settings

In slick 1.5 you can now add settings using the data-slick attribute. You still need to call $(element).slick() to initialize slick on the element.

Example:

<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>

Settings

Option