基于slick插件的jQuery幻灯片特效

PetitQ 幻灯片/轮播 2018-11-07 2.17K 0 0

这是一款基于 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
```
```
})
```

基于 slick 插件的 jQuery 幻灯片特效

已有 543 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

幻灯片/轮播

基于slick插件的jQuery幻灯片特效

使用方法:

HTML 结构:

CSS 样式:

初始化插件:

基于 slick 插件的 jQuery 幻灯片特效

相关文章

vitrine - 响应式图片轮播旋转展示jQuery插件

简单轻量jQuery响应式轮播图插件

jQuery+CSS3超酷全屏视觉差幻灯片特效

发表回复取消回复

热销模板

幻灯片/轮播

使用方法:

HTML 结构:

CSS 样式:

初始化插件:

基于 slick 插件的 jQuery 幻灯片特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复