Slick.js使用方法（响应式轮播插件）

Posted 2023-05-05

参考技术A 简介

slick 是一个基于 jQuery 的响应触摸式幻灯片插件，支持IE8+，Chrome, Firefox, and Safari，具有以下特点：

支持响应式

浏览器支持 CSS3 时，则使用 CSS3 过度/动画

支持移动设备滑动

支持桌面浏览器鼠标拖动

支持循环

支持左右控制

支持动态添加、删除、过滤

支持自动播放、圆点、箭头、回调等等

兼容

浏览器兼容：兼容 IE7+ 及其他主流浏览器，若要兼容 IE7，需修改 CSS（slick.css）。

jQuery兼容：兼容 1.7 及以上版本。

使用方法

1、引入文件

  <link rel="stylesheet" href="style/slick.css">

  <script src="script/jquery.min.js"></script>

  <script src="script/slick.min.js"></script>

注意：需jQuery 1.7 +

2、html

  <div class="slick">

      <div><a href="http://www.dowebok.com"><img src="images/1.jpg" alt=""></a></div>

      <div><a href="http://www.dowebok.com"><img src="images/2.jpg" alt=""></a></div>

      <div><a href="http://www.dowebok.com"><img src="images/4.jpg" alt=""></a></div>

      <div><a href="http://www.dowebok.com"><img src="images/3.jpg" alt=""></a></div>

  </div>

3、javascript

  $(function()

      $('.slick').slick(

          dots: true

      );

  );

参数

参数类型默认值说明

accessibility布尔值true启用Tab键和箭头键导航

autoplay布尔值false自动播放

autoplaySpeed整数3000自动播放间隔

centerMode布尔值false中心模式

centerPadding字符串’50px’中心模式左右内边距

cssEase字符串‘ease’CSS3 动画

customPagingfunctionn/a自定义分页

dots布尔值false指示点

draggable布尔值true启用桌面拖动

easing字符串‘linear’animate() fallback easing

fade布尔值false淡入淡出

arrows布尔值true左右箭头

infinite布尔值true循环播放

lazyLoad字符串‘ondemand’延迟加载，可选 ondemand 和 progressive

onBeforeChange(this, index)methodnull开始切换前的回调函数

onAfterChange(this, index)methodnull切换后的回调函数

onInit(this)methodnull第一次初始化后的回调函数

onReInit(this)methodnull再次初始化后的回调函数

pauseOnHover布尔值true鼠标悬停暂停自动播放

responsiveobjectnull断点触发设置

slide字符串‘div’滑动元素查询

slidesToShow整数1幻灯片每屏显示个数

slidesToScroll整数1幻灯片每次滑动个数

speed整数300滑动时间

swipe布尔值true移动设备滑动事件

touchMove布尔值true触摸滑动

touchThreshold整数5滑动切换阈值，即滑动多少像素后切换

useCSS布尔值true使用 CSS3 过度

vertical布尔值false垂直方向

方法

方法Argument说明

slick()options : object初始化 slick

unslick() 销毁 slick

slickNext() 切换下一张

slickPrev() 切换上一张

slickPause() 暂停自动播放

slickPlay() 开始自动播放

slickGoTo()index : int切换到第 x 张

slickCurrentSlide() 返回当前幻灯片索引

slickAdd()element : html or DOM object, index: int, addBefore: boolAdd 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

slideRemove()index: int, removeBefore: boolRemove 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 functionFilters slides using jQuery .filter syntax

slickUnfilter() Removes applied filter

slickSetOption(option,value,refresh)option : string(option name), value : depends on option, refresh : 布尔值Sets an option live. Set refresh to true if it is an option that changes the display

推荐一个 jQuery 响应式轮播/滑块 [关闭]

【中文标题】推荐一个 jQuery 响应式轮播/滑块 [关闭]

【英文标题】：Recommend a jQuery responsive carousel / slider [closed]

【发布时间】：2013-04-17 03:12:42

【问题描述】：

我正在寻找一个现成的 jQuery 插件（免费或付费），它可以让我创建支持触摸的“响应式轮播”。

它应该工作的方式是在站点中间显示当前图像（定义图像的宽度和高度，固定所有图像，图像垂直居中，轮播/滑块的高度不随浏览器宽度而变化），部分或右侧完全可见下一张图片，左侧为上一张。 当浏览器变大时，那些“剪掉”的图片会越来越多，如果浏览器足够大，3张照片会被完全看清，下一张在右边被剪掉，上一张在左边被剪掉。 图片看起来像幻灯片，中间有一张图片，在浏览器窗口允许的情况下，其他图片在左右可见。

这张图片显示了这个轮播在不同的浏览器宽度下应该如何表现......最暗的框是水平对齐的照片，它们之外的较亮的框显示不同的浏览器窗口高度：

对于那些无法看到我正在谈论的内容的人，接下来的屏幕会显示宽度浏览器窗口宽度 1920 像素、1800 像素、1600 像素和 1400 像素。这些是来自整个网站的作物，充满了浏览器的整个宽度。

【问题讨论】：

我讨厌一个超过 10 票的问题（显然对我们中的一些人有用）被关闭为题外话>_

【参考方案1】：

过去几天我一直在寻找非常相似的东西。到目前为止我的最爱

皇家滑块

http://dimsemenov.com/plugins/royal-slider/visible-nearby/

这个得到了一切。触摸支持，高度可定制，响应式布局..您应该立即运行。价格标签是 12 美元。

carouFredSel

也非常强大，支持触摸，但不像皇家滑块那样无忧无虑和优雅，但话又说回来，它是免费的..他们有一个非常好的展示页面，其中包含基于他们的插件的各种轮播..

这个可能有点意思.. http://coolcarousels.frebsite.nl/c/2/

【讨论】：

看来 RoyalSlider 可能是我。至于我想花钱请人写它，我也可以买它:)。

它符合所有要求:)

hi marcin..是的，royalslider 似乎相当一流，如果您遇到问题，您将获得客户支持..我找到了另一个，看起来也很有希望..@987654323 @ .. 触摸时非常流畅..我今天必须研究一下

【参考方案2】：

你可以使用：

bxSlider：http://bxslider.com/ FlexSlider：http://www.woothemes.com/flexslider/

【讨论】：

是的，这两个看起来都很酷！

+1 bxslider 代码真不错

【参考方案3】：

我会用这个。 http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/ 它使用 css3 动画，因为它是纯 css，所以您可以使用 @media 查询来随着屏幕大小的变化而更改滑块上应用的 css。

通过查看此样板文件http://www.getskeleton.com/，您可以了解有关媒体查询的更多信息

【讨论】：

这个滑块很不错，但它不支持“胶片”外观 ootb，并且重新编码超出了我的编码能力:(

胶片是什么意思？你想让它从左向右滑动还是从右向左滑动或淡入淡出？

查看我帖子中的图片。水平对齐的深色矩形代表照片。当前有一个在中心（水平居中），并且在浏览器窗口中可以容纳的左右数量。如果一个不适合它被浏览器窗口剪切。滑动即可将一张照片向左或向右移动。

【参考方案4】：

我最近自己搜索了类似的东西，发现了以下文章：http://www.tripwiremagazine.com/2012/12/jquery-carousel.html

查看文章及其网站上提供的示例并将它们与您的要求进行比较，我认为http://codecanyon.net/item/icarousel/full_screen_preview/2527180 或http://www.bkosborne.com/jquery-feature-carousel 最适合您。第一个将要求您购买它。

你应该看看第一篇文章。有可能我忽略了一些东西，或者你找到了更适合的东西......

【参考方案5】：

Wowslider 在这种情况下可能很有用.. 检查一次 http://wowslider.com/jquery-slider-carousel-mac-stack-demo.html

类似的解决方案也可以在 http://www.smoothdivscroll.com/#quickdemo

【讨论】：

WowSlider 有很多很酷的效果，真的很棒！虽然用于商业用途的成本为 69 美元。

【参考方案6】：

Swipe 看起来很不错，而且反应灵敏。它也非常流畅，支持在手机/平板电脑上滑动。

http://swipejs.com/

可能不如 Royal Slider 功能齐全，但它是免费的。