这是一款基于slick旋转木马插件来制作的jQuery幻灯片特效。该幻灯片特效使用缩放和淡入淡出的过渡动画效果，它支持移动触摸设备，效果非常炫酷。
slick是一款支持移动设备的旋转木马插件。slick功能强大，它提供众多的参数，使你能够轻松的制作出各种旋转木马和幻灯片特效。
使用方法
在页面中引入slick插件的相关文件。
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
<script src='js/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script>
HTML结构
该幻灯片的HTML结构如下：
<div class="slideshow">
<div class="slider">
<div class="item">
<img src="1.jpg" />
</div>
<div class="item">
<img src="2.jpg" />
</div>
<div class="item">
<img src="3.jpg" />
</div>
<div class="item">
<img src="4.jpg" />
</div>
</div>
</div>
CSS样式
为幻灯片添加下面的必要CSS样式：幻灯片的过渡动画使用自定义的贝兹曲线函数。另外图片默认被放大1.2倍，当前激活的图片会被添加.slick-active class，此时图片被缩放会原来的大小。
.slideshow {
position: relative;
z-index: 1;
height: 100%;
max-width: 700px;
margin: 50px auto;
}
.slideshow * {
outline: none;
}
.slideshow .slider {
box-shadow: 0 20px 50px -25px black;
}
.slideshow .slider-track {
-webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
}
.slideshow .item {
height: 100%;
position: relative;
z-index: 1;
}
.slideshow .item img {
width: 100%;
-webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.slideshow .item.slick-active img {
-webkit-transform: scale(1);
transform: scale(1);
}
初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化slick插件。
$('.slider').slick({
autoplay:true,
autoplaySpeed:3000,
draggable: true,
arrows: false,
dots: true,
fade: true,
speed: 900,
infinite: true,
cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
touchThreshold: 100
})
