slick.JS

slick.js基于jQuery的响应触摸式幻灯片插件

slick.JS

slick.js基于jQuery的响应触摸式幻灯片插件

#native_company# #native_desc#
#native_cta#

特征

单项

1

2

3

4

5

6


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

多个项目

1

2

3

4

5

6

7

8

9


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

响应显示

1

2

3

4

5

6

7

8


$('.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
  ]
});
				

可变宽度

200

175

150

300

225

125


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

适应高度

1

2

Look ma!

3

Check
this out!

4

Woo!


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

数据属性设置

在slick 1.5中,您现在可以使用data-slick属性添加设置。您仍然需要调用$(element).slick()来初始化元素上的滑动。

1

2

3

4

5

6


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

中心模式

1

2

3

4

5

6


$('.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
      }
    }
  ]
});
				

延迟加载


// To use lazy loading, set a data-lazy attribute
// on your img tags and leave off the src

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

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

自动播放

1

2

3

4

5

6


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

褪色


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

添加和删​​除

1


$('.add-remove').slick({
  slidesToShow: 3,
  slidesToScroll: 3
});
$('.js-add-slide').on('click', function() {
  slideIndex++;
  $('.add-remove').slick('slickAdd','<div><h3>' + slideIndex + '</h3></div>');
});

$('.js-remove-slide').on('click', function() {
  $('.add-remove').slick('slickRemove',slideIndex - 1);
  if (slideIndex !== 0){
    slideIndex--;
  }
});
				

筛选

1

2

3

4

5

6

7

8

9

10

11

12


$('.filtering').slick({
  slidesToShow: 4,
  slidesToScroll: 4
});

var filtered = false;

$('.js-filter').on('click', function(){
  if (filtered === false) {
    $('.filtering').slick('slickFilter',':even');
    $(this).text('Unfilter Slides');
    filtered = true;
  } else {
    $('.filtering').slick('slickUnfilter');
    $(this).text('Filter Slides');
    filtered = false;
  }
});
				

禁用

如果你真的想成为那个家伙...


$('.your-slider').slick('unslick');
				

滑块同步

1

2

3

4

5

1

2

3

4

5


 $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});
				

右到左

1

2

3

4

5

6


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

注意: HTML标记或滑块的父级必须将属性“ dir”设置为“ rtl”。

还有更多...

入门

设置您的HTML标记。


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

将/ slick文件夹移到您的项目中


在您的<head>中添加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"/>
				

在jQuery之后(在jQuery之后需要jQuery 1.7 +)之前,在关闭<body>标签之前添加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>
				

在脚本文件或嵌入式脚本标签中初始化滑块


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

注意:我强烈建议您将初始化脚本放在外部JS文件中。

设定值

设置 类型 默认值 描述
accessibility boolean true 启用Tab键和箭头键导航
adaptiveHeight boolean false 为单滑块水平轮播启用自适应高度。
autoplay boolean false 启用自动播放
autoplaySpeed int(ms) 3000 自动播放速度(以毫秒为单位)
arrows boolean true 上一个/下一个箭头
asNavFor string null 将滑块设置为其他滑块的导航(类或ID名称)
appendArrows string $(element) 更改导航箭头的附加位置(选择器,htmlString,数组,元素,jQuery对象)
appendDots string $(element) 更改导航点的附加位置(选择器,htmlString,数组,元素,jQuery对象)
prevArrow string (html|jQuery selector) | object (DOM node|jQuery object) <button type="button" class="slick-prev">Previous</button> 允许您选择节点或为“上一个”箭头自定义HTML。
nextArrow string (html|jQuery selector) | object (DOM node|jQuery object) <button type="button" class="slick-next">Next</button> 允许您选择节点或为“下一步”箭头自定义HTML。
centerMode boolean false 通过部分上一张/下一张幻灯片启用居中视图。与奇数的slidesToShow计数一起使用。
centerPadding string '50px' 处于中心模式时的侧面填充(像素或%)
cssEase string 'ease' CSS3动画缓动
customPaging function n/a 自定义分页模板。有关使用示例,请参见源。
dots boolean false 显示圆点指示器
dotsClass string 'slick-dots' 滑动指示器点容器类
draggable boolean true 启用鼠标拖动
fade boolean false 启用淡入淡出
focusOnSelect boolean false 启用对选定元素的关注(单击)
easing string 'linear' 为jQuery动画添加缓动。与缓动库或默认缓动方法一起使用
edgeFriction integer 0.15 滑动非无限轮播边缘时的阻力
infinite boolean true 无限循环滑动
initialSlide integer 0 滑动即可开始
lazyLoad string 'ondemand' 设置延迟加载技术。接受“按需”或“渐进式”
mobileFirst boolean false 响应式设置使用移动优先计算
pauseOnFocus boolean true 暂停焦点自动播放
pauseOnHover boolean true 悬停时暂停自动播放
pauseOnDotsHover boolean false 悬停点时暂停自动播放
respondTo string 'window' 响应对象响应的宽度。可以是“窗口”,“滑块”或“最小”(两者中较小的一个)
responsive object none 包含断点和设置对象的对象(请参见演示)。在给定的屏幕宽度下启用设置设置。将设置设置为“ unslick”而不是对象,以禁用给定断点处的滑动。
rows int 1 将此设置为大于1将初始化网格模式。使用slidesPerRow设置每行应有多少张幻灯片。
slide element '' 元素查询用作幻灯片
slidesPerRow int 1 通过“行”选项初始化网格模式后,可以设置每个网格行中有多少张幻灯片
slidesToShow int 1 要显示的幻灯片数量
slidesToScroll int 1 要滚动的幻灯片数
speed int(ms) 300 滑动/淡入淡出动画速度
swipe boolean true 启用swiping
swipeToSlide boolean false 允许用户直接拖动或滑动到幻灯片上,而与slidesToScroll无关
touchMove boolean true 轻触即可滑动
touchThreshold int 5 要推进幻灯片,用户必须滑动(1 / touchThreshold)*滑块的宽度
useCSS boolean true 启用/禁用CSS过渡
useTransform boolean true 启用/禁用CSS转换
variableWidth boolean false 可变宽度的幻灯片
vertical boolean false 垂直滑动模式
verticalSwiping boolean false 垂直滑动模式
rtl boolean false 更改滑块的方向以从右到左
waitForAnimate boolean true 忽略动画时前进幻灯片的请求
zIndex number 1000 设置幻灯片的zIndex值,对IE9和更低版本有用

事件

在光滑的1.4版本中,回调方法已被弃用,并被事件代替。如下所示使用它们:


// 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);
});
        
事件 Arguments 描述
afterChange slick, currentSlide 更换幻灯片后触发
beforeChange slick, currentSlide, nextSlide 更换幻灯片前触发
breakpoint event, slick, breakpoint 击中断点后触发。
destroy event, slick 滑块被破坏或打滑时。
edge slick, direction 在非无限模式下将边缘过卷时触发。
init slick 首次初始化后触发。
reInit slick 每次重新初始化后触发
setPosition slick 位置/大小更改后触发
swipe slick, direction 滑动/拖动后触发
lazyLoaded event, slick, image, imageSource 图像延迟加载后触发
lazyLoadError event, slick, image, imageSource 图片加载失败后触发

方法

通过1.4版中的slick方法本身在slick实例上调用方法,请参见下文:


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

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

这种新语法还允许您调用任何内部的slick方法:


// Manually refresh positioning of slick
$('.your-element').slick('setPosition');
        
方法 Arguments 描述
slickCurrentSlide none 返回当前幻灯片索引
slickGoTo int : slide number, boolean: dont animate 按索引导航到幻灯片
slickNext none 导航到下一张幻灯片
slickPrev none 导航到上一张幻灯片
slickPause none 暂停自动播放
slickPlay none 开始自动播放
slickAdd html or DOM object, index, addBefore 添加一张幻灯片。如果提供了索引,则将在该索引处添加,或者在设置了addBefore之前添加。如果未提供索引,则在设置了addBefore的情况下,将其添加到末尾。接受HTML字符String || Object
slickRemove index, removeBefore 按索引删除幻灯片。如果removeBefore设置为true,则删除幻灯片的前一个索引;如果未指定索引,则删除第一个幻灯片。如果removeBefore设置为false,则删除幻灯片跟随索引;如果没有索引,则删除最后一张幻灯片。
slickFilter Selector or Function 使用jQuery .filter()过滤幻灯片
slickUnfilter index 删除应用的过滤
slickGetOption option : string 获取单个选项值。
slickSetOption option : string, value : depends on option, refresh : boolean 实时设置单个值。如果它是UI更新,则将refresh设置为true。
unslick none 解构光滑
getSlick none 获取光滑对象

现在下载它

下载

您还可以将slick与jsDelivr CDN一起使用!


CSS

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

JS

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

www.slickjs.cn     slick.js 中文网     [英文站]