Slick是一个功能丰富的jQuery滑块插件，用于创建高度可定制、完全响应和移动友好的转盘/滑块，可与任何html元素一起使用。

特征：

• 完全响应。适用于任何设备。
• 在可用时使用CSS3。不起作用时完全起作用。
• 已启用滑动。或者残疾，如果你愿意的话。
• 无限循环。
• 水平和垂直滚动。
• 延迟加载和响应迅速的图像交付。
• 自动播放、点、箭头、回调等。。。

参见：

• 前50名最佳旋转木马jQuery插件

如何使用它:

1.在网页的标题部分包含核心和主题CSS。

<link rel="stylesheet" href="/path/to/slick.css">
<link rel="stylesheet" href="/path/to/slick-theme.css">

2.将要滑动的Html内容包裹在DIV元素中。

<div class="slider demo">
  <div> Slide  1 </div>
  <div> Slide  2 </div>
  <div> Slide  3 </div>
  ...
</div>

3.在页面底部包含最新版本的jQuery库和slick.js。

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/slick.js"></script>

4.调用您刚刚创建的旋转木马包装器上的插件。

$(document).ready(function(){
  $('.demo').slick();
});

5.可用于自定义转盘的选项。

$('.demo').slick({
 
  // Enables tabbing and arrow key navigation
  accessibility: true,
 
  // Adapts slider height to the current slide
  adaptiveHeight: false,
 
  // Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)
  appendArrows: $(element),
 
  // Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object)
  appendDots: $(element),
 
  // Enable Next/Prev arrows
  arrows: true,
 
  // Sets the slider to be the navigation of other slider (Class or ID Name)
  asNavFor: null,
 
  // prev arrow
  prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
 
  // next arrow
  nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
 
  // Enables auto play of slides
  autoplay: false,
 
  // Auto play change interval
  autoplaySpeed: 3000,
 
  // Enables centered view with partial prev/next slides. 
  // Use with odd numbered slidesToShow counts.
  centerMode: false,
 
  // Side padding when in center mode. (px or %)
  centerPadding: '50px',
 
  // CSS3 easing
  cssEase: 'ease',
 
  // Custom paging templates. 
  customPaging: function(slider, i) {
    return '<button type="button" data-role="none">' + (i + 1) + '</button>';
  },
 
  // Current slide indicator dots
  dots: false,
 
  // Class for slide indicator dots container
  dotsClass: 'slick-dots',
 
  // Enables desktop dragging
  draggable: true,
 
  // animate() fallback easing
  easing: 'linear',
 
  // Resistance when swiping edges of non-infinite carousels
  edgeFriction: 0.35,
 
  // Enables fade
  fade: false,
 
  // Focus on select and/or change
  focusOnSelect: false,
  focusOnChange: false,
 
  // Infinite looping
  infinite: true,
 
  // Initial slide
  initialSlide: 0,
 
  // Accepts 'ondemand' or 'progressive' for lazy load technique
  lazyLoad: 'ondemand',
 
  // Mobile first
  mobileFirst: false,
 
  // Pauses autoplay on hover
  pauseOnHover: true,
 
  // Pauses autoplay on focus
  pauseOnFocus: true,
 
  // Pauses autoplay when a dot is hovered
  pauseOnDotsHover: false,
 
  // Target containet to respond to
  respondTo: 'window',
 
  // Breakpoint triggered settings
  /* eg
  responsive: [{
 
    breakpoint: 1024,
    settings: {
      slidesToShow: 3,
      infinite: true
    }
 
  }, {
 
    breakpoint: 600,
    settings: {
      slidesToShow: 2,
      dots: true
    }
 
  }, {
 
    breakpoint: 300,
    settings: "unslick" // destroys slick
 
  }]
  */
  responsive: null,
 
  // Setting this to more than 1 initializes grid mode. 
  // Use slidesPerRow to set how many slides should be in each row.
  rows: 1,
 
  // Change the slider's direction to become right-to-left
  rtl: false,
 
  // Slide element query
  slide: '',
 
  // # of slides to show at a time
  slidesToShow: 1,
 
  // With grid mode intialized via the rows option, this sets how many slides are in each grid row.
  slidesPerRow: 1,
 
  // # of slides to scroll at a time
  slidesToScroll: 1,
 
  // Transition speed
  speed: 500,
 
  // Enables touch swipe
  swipe: true,
 
  // Swipe to slide irrespective of slidesToScroll
  swipeToSlide: false,
 
  // Enables slide moving with touch
  touchMove: true,
 
  // To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider.
  touchThreshold: 5,
 
  // Enable/Disable CSS Transitions
  useCSS: true,
 
  // Enable/Disable CSS Transforms
  useTransform: true,
 
  // Disables automatic slide width calculation
  variableWidth: false,
 
  // Vertical slide direction
  vertical: false,
 
  // hanges swipe direction to vertical
  verticalSwiping: false,
 
  // Ignores requests to advance the slide while animating
  waitForAnimate: true,
 
  // Set the zIndex values for slides, useful for IE9 and lower
  zIndex: 1000
 
});

5.API方法。

// destroys the plugin
$('.demo').unslick();
 
// Triggers next slide
$('.demo').slickNext();
 
// Triggers previous slide
$('.demo').slickPrev();
 
// Pauses Autoplay
$('.demo').slickPause();
 
// Starts Autoplay
$('.demo').slickPlay();
 
// Goes to slide by index, skipping animation if second parameter is set to true
$('.demo').slickGoTo(index,dontAnimate);
 
// Returns the current slide index
$('.demo').slickCurrentSlide();
 
// Adds 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
$('.demo').slickAdd(element,index,addBefore);
 
// Removes 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.
$('.demo').slickRemove(index,removeBefore);
 
// Filters slides using jQuery .filter syntax
$('.demo').slickFilter(filter);
 
// Removes applied filter
$('.demo').slickUnfilter();
 
// Gets an option value.
$('.demo').slickGetOption(option);
 
// Changes a single option to given value; refresh is optional.
$('.demo').slickSetOption(option,value,refresh);
 
// Gets Slick Object
$('.demo').getSlick();

6.事件处理程序。

// Before slide change callback
$('.demo').on('afterChange', function(event, slick, currentSlide){
  // do something
});
 
// Before slide change callback
$('.demo').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  // do something
});
 
// Fires after a breakpoint is hit
$('.demo').on('breakpoint', function(event, slick, breakpoint){
  // do something
});
 
// When slider is destroyed, or unslicked.
$('.demo').on('destroy', function(event, slick){
  // do something
});
 
// Fires when an edge is overscrolled in non-infinite mode.
$('.demo').on('edge', function(event, slick, direction){
  // do something
});
 
// When Slick initializes for the first time callback. 
// Note that this event should be defined before initializing the slider.
$('.demo').on('init', function(event, slick){
  // do something
});
 
// Every time Slick (re-)initializes callback
$('.demo').on('reInit', function(event, slick){
  // do something
});
 
// Every time Slick recalculates position
$('.demo').on('setPosition', function(event, slick){
  // do something
});
 
// Fires after swipe/drag
$('.demo').on('swipe', function(event, slick, direction){
  // do something
});
 
// Fires after image loads lazily
$('.demo').on('lazyLoaded', function(event, slick, image, imageSource){
  // do something
});
 
// Fires after image fails to load
$('.demo').on('lazyLoadError', function(event, slick, image, imageSource){
  // do something
});

更新日志：

2022-11-22

• 文档已更新
• 演示已更新

v1.9.0（2018年4月19日）

• 使现代化

v1.5.9 (2016-02-05)

• 使现代化

v1.4.0（2015年1月26日）

• 使现代化

v1.3.3 (2014-04-09)

• 修复firefox的菜单

v1.3.2 (2014-04-03)

• 将上一个/下一个锚点更改为按钮标记
• 更新样式
• 更新占位符代码

v1.2.8 (2014-03-31)

• 添加淡入淡出

v1.2.7 (2014-03-30)

• 添加/删除项目补丁

v1.2.4 (2014-03-29)

• 删除精灵，添加图标字体

v1.2.1 (2014-03-28)

• 使现代化

 

预览截图

完全响应和灵活 jQuery旋转木马插件 光滑