为什么要用 slick 而不用 swiper? 因为 swiper2 在移动端滑动时容易出现卡顿, 所以不太适合移动端, swiper3 虽然解决了移动端的卡顿问题, 但因为只兼容到 IE10+, 所以在 pc 端的兼容性又不是很好. 而 slick 插件则不存在这种问题, 它是一款基于 jQuery 1.7 及以上版本的选项卡插件, 它的兼容性良好, 适用于火狐, Chrome,Safari 和 IE8 及以上的 pc 端浏览器, 同样在移动端的使用也不存在问题.
1. 引入 slick 插件:
首先, 正如文章开头所说, 想要使用 slick 插件, 必须加载 jquery1.7 以上的版本. 其次, slick 插件的引入方式和 swiper 插件一样, 需要在头部添加以下代码:
- rel="stylesheet" type="text/CSS" href="文件路径 / slick.css">
- type="text/javascript" src="文件路径 / slick.js">
如果你还想使用 slick 插件的一些默认设置, 例如默认的箭头样式, 那么你还需再要加上:
<link rel="stylesheet type="text/CSS"href=" 文件路径 / slick-theme.CSS">
2. 使用 slick 插件:
如果将 slick 插件和 swiper 插件进行一番比较, 会发现相比 swiper,slick 的各方面都要简单一些, 就像使用方法. 例如我们想要让一个含有两张图片 --1.jpg 和 2.jpg 的 div(它的类名设定为 "pic"), 那么 swiper 插件需要如下操作:
- class="pic swiper-container">
- class="swiper-wrapper>
- class="swiper-slide"> src="img/1.jpg">
- class="swiper-slide"> src="img/2.jpg">
可以看出, 如果想要使用 swiper, 那么就需要给标签加很多类名, 而 slick 的使用方法则很简单, 只需要一句话:
$('.pic').slick();
这样后, 再在网页中检查元素时, 会发现 slick 的类名都是是自动加上去的.
3. 修改 slick 的 CSS 样式:
修改 slick 的 CSS 样式, 一般会通过. slick-slick{} 和. slick-list{} 来控制, 例如在 slick 插件里进行拖拽时, 会出现默认的蓝色边框
来源: http://www.bubuko.com/infodetail-2972008.html