0

slick

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

Official Site
Github repo
Main metrics

Github stars Tracking Chart

你需要的最后一个轮播。

slick特性：

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

Overview

Name With Ownerkenwheeler/slick
Primary LanguageJavaScript
Program languageMakefile (Language Count: 7)
PlatformCross-platform, Web browsers
License:MIT License
Release Count51
Last Release Namev1.8.1 (Posted on 2017-10-03 13:49:29)
First Release Name1.0.0 (Posted on )
Created At2014-03-24 02:10:05
Pushed At2024-04-15 03:56:48
Last Commit At2024-03-11 13:48:25
Stargazers Count28.3k
Watchers Count555
Fork Count5.9k
Commits Count0.9k
Has Issues Enabled
Issues Count3596
Issue Open Count1201
Pull Requests Count242
Pull Requests Open Count197
Pull Requests Close Count251
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private

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

To the top