slick

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

Github星跟蹤圖

你需要的最后一个轮播。

slick特性:

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

概覽

名稱與所有者kenwheeler/slick
主編程語言JavaScript
編程語言Makefile (語言數: 7)
平台Cross-platform, Web browsers
許可證MIT License
發布數51
最新版本名稱v1.8.1 (發布於 2017-10-03 13:49:29)
第一版名稱1.0.0 (發布於 )
創建於2014-03-24 02:10:05
推送於2024-04-15 03:56:48
最后一次提交2024-03-11 13:48:25
星數28.3k
關注者數555
派生數5.9k
提交數0.9k
已啟用問題?
問題數3596
打開的問題數1201
拉請求數242
打開的拉請求數197
關閉的拉請求數251
已啟用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

去到頂部