slick

你所需要的最后一个轮播插件
10天前 2 18 我要收藏

slick

你所需要的最后一个轮播插件

Demo

http://kenwheeler.github.io/slick

CDN

CDN 托管 slick 是一个快速开始的好方法:

在你的 <head> 中添加:

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.8/slick.css"/>

// 如果你想要默认的样式,添加 slick-theme.css 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.8/slick-theme.css"/>

然后在 <body> 标签闭合之前添加:

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.8/slick.min.js"></script>

包管理器

//Bower
bower install --save slick-carousel

//NPM
npm install slick-carousel

开始

1、设置你的HTML标记

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

2、引用 slick.css

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

3、在 jQuery (需要 jQuery 1.7 +) 后添加 slick.js

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

4、初始化 slick.js

$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});

完成上面的步骤后,你的整个html看上去会是这样:


<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

  <div class="your-class">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
  </div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>

  </body>
</html>

贡献

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

数据属性设置

在 slick 1.5 版本中,你可以使用 data-slick 属性添加配置。当然,你仍然需要该元素上调用 $(element).slick() 来初始化 slick。

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>

设置

选项 类型 默认值 描述
accessibility boolean true 启用Tab键和方向键导航
autoplay boolean false 启用自动播放
autoplaySpeed int 3000 自动播放的切换时间间隔
centerMode boolean false Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
centerPadding string '50px' 中心模式下滑块的 padding(px 或 %)
cssEase string 'ease' CSS3 缓动
customPaging function n/a 自定义分页模板,查看源码中的使用示例
dots boolean false 当前幻灯片指示点
dotsClass string 'slick-dots' 幻灯指示点容器类
draggable boolean true 启用桌面拖曳
easing string 'linear' animate() 备用缓动
edgeFriction integer 0.15 触摸滑动有限轮播的边缘的阻力
fade boolean false 启用淡入淡出
arrows boolean true 启用 Next/Prev 箭头导航
appendArrows string $(element) 更改导航箭头的容器 (选择器, html字符串, 数组, 元素, jQuery 对象)
appendDots string $(element) 更改导航点的容器 (选择器, html字符串, 数组, 元素, jQuery 对象)
mobileFirst boolean false 响应式设置移动优先
prevArrow string (jQuery 选择器)或 对象 (DOM 选择器) <button type="button" class="slick-prev">Previous</button> 自定义 "Previous" 箭头
nextArrow string (jQuery 选择器)或 对象 (DOM 选择器) <button type="button" class="slick-next">Next</button> 自定义 "Next" 箭头
infinite boolean true 无限循环
initialSlide integer 0 从第几个滑块开始
lazyLoad string 'ondemand' 接受 'ondemand' 或 'progressive' 值用于延迟加载技术
pauseOnHover boolean true 鼠标移动到滑块上时暂停自动播放
pauseOnDotsHover boolean false 鼠标移动到点上时暂停自动播放
respondTo string 'window' 响应对象响应的宽度,可以是 'window', 'slider' 或 'min' ( 'window', 'slider'两个之中更小的那个)
responsive object null 包含断点和设置的对象,见 demo
rows int 1 Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row.
slide string '' Slide element query
slidesPerRow int 1 With grid mode intialized via the rows option, this sets how many slides are in each grid row. dver
slidesToShow int 1 # of slides to show at a time
slidesToScroll int 1 # of slides to scroll at a time
speed int 300 Transition speed
swipe boolean true Enables touch swipe
swipeToSlide boolean false Swipe to slide irrespective of slidesToScroll
touchMove boolean true Enables slide moving with touch
touchThreshold int 5 To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider.
useCSS boolean true Enable/Disable CSS Transitions
variableWidth boolean false Disables automatic slide width calculation
vertical boolean false Vertical slide direction
verticalSwiping boolean false Changes swipe direction to vertical
rtl boolean false Change the slider's direction to become right-to-left
waitForAnimate boolean true Ignores requests to advance the slide while animating
zIndex number 1000 设置滑块的 zIndex 值,用于 IE9 以下

事件

在 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);
});
事件 参数 描述
afterChange event, slick, currentSlide After slide change callback
beforeChange event, slick, currentSlide, nextSlide Before slide change callback
breakpoint event, slick, breakpoint Fires after a breakpoint is hit
destroy event, slick When slider is destroyed, or unslicked.
edge event, slick, direction Fires when an edge is overscrolled in non-infinite mode.
init event, slick When Slick initializes for the first time callback
reInit event, slick Every time Slick (re-)initializes callback
setPosition event, slick Every time Slick recalculates position
swipe event, slick, direction Fires after swipe/drag

方法

Methods are called on slick instances through the slick method itself in version 1.4, see below:

// Add a slide
$('.your-element').slick('slickAdd',"<div></div>");

// Get the current slide
var currentSlide = $('.your-element').slick('slickCurrentSlide');

This new syntax allows you to call any internal slick method as well:

// Manually refresh positioning of slick
$('.your-element').slick('setPosition');
方法 参数 描述
slick options : object Initializes Slick
unslick Destroys Slick
slickNext Triggers next slide
slickPrev Triggers previous slide
slickPause Pause Autoplay
slickPlay Start Autoplay
slickGoTo index : int, dontAnimate : bool Goes to slide by index, skipping animation if second parameter is set to true
slickCurrentSlide Returns the current slide index
slickAdd element : html or DOM object, index: int, addBefore: bool Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String Object
slickRemove index: int, removeBefore: bool Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
slickFilter filter : selector or function Filters slides using jQuery .filter syntax
slickUnfilter Removes applied filter
slickGetOption option : string(option name) Gets an option value.
slickSetOption option : string(option name), value : depends on option, refresh : boolean Sets an option live. Set refresh to true if it is an option that changes the display

示例

初始化:

$(element).slick({
  dots: true,
  speed: 500
});

删除:

$(element).unslick();

单项:

$('.single-item').slick();

多项:

$('.multiple-items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

响应式:

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

可变宽度:

$('.variable-width').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true
});

自适应高度

$('.one-time').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
});     

中心模式

$('.center').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});

延迟加载:

<img data-lazy="img/lazyfonz1.png"/>

$('.lazy').slick({
  lazyLoad: 'ondemand',
  slidesToShow: 3,
  slidesToScroll: 1
});

自动播放:

$('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});

淡入淡出

$('.fade').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
});

从右到左:

$('.single-item-rtl').slick({
  rtl: true
});

Sass 变量

变量名 类型 默认值 描述
$slick-font-path string "./fonts/" Directory path for the slick icon font
$slick-font-family string "slick" Font-family for slick icon font
$slick-loader-path string "./" Directory path for the loader image
$slick-arrow-color color white Color of the left/right arrow icons
$slick-dot-color color black Color of the navigation dots
$slick-dot-color-active color $slick-dot-color Color of the active navigation dot
$slick-prev-character string '\2190' Unicode character code for the previous arrow icon
$slick-next-character string '\2192' Unicode character code for the next arrow icon
$slick-dot-character string '\2022' Unicode character code for the navigation dot icon
$slick-dot-size pixels 6px Size of the navigation dots

依赖

jQuery 1.7

许可

Copyright (c) 2014 Ken Wheeler

Licensed under the MIT license.

Free as in Bacon.

slick 相关推荐
对于该库,你有要推荐的内容么?点此提交推荐
请文明评论,与人为善,比聪明更重要!
评论(2)