swiper.min.js插件

最新推荐文章于 2024-10-30 23:27:46 发布

shengmeshi

最新推荐文章于 2024-10-30 23:27:46 发布

阅读量2.1w

点赞数 3

分类专栏：前端插件文章标签： swiper.min.js插件

本文链接：https://blog.csdn.net/shengmeshi/article/details/76036260

版权

前端插件专栏收录该内容

12 篇文章 1 订阅

订阅专栏

swiper.min.js插件实现多种滑动效果，可在pc、手机、平板中使用。

该插件官方网址：http://www.swiper.com.cn/（版本3）、http://2.swiper.com.cn/（版本2.X）里面可以下载该插件，而且有相应的实例。

例外最近发现还有swiper相关的交流网址:http://bbs.swiper.com.cn/forum.php 。

例1：简单的轮播图效果：

引用：

css:

* {margin: 0;padding: 0;}
.swiper-slide{text-align:center; height:300px;line-height:300px;}
.red-slide{background:red;}
.orange-slide{background:orange;}
.blue-slide{background:blue;}
.green-slide{background:green;}

html:

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide green-slide">slider1</div>
<div class="swiper-slide red-slide">slider2</div>
<div class="swiper-slide orange-slide">slider3</div>
<div class="swiper-slide blue-slide">slider4</div>
</div>

<div class="swiper-pagination"></div>

<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

js:

var mySwiper = new Swiper('.swiper-container',{
//切换效果
effect: 'fade',//'flip','coverflow','cube','fade', 默认横向滑动
loop:true, //是否循环
autoplay: 3000,
// 如果需要分页器
pagination: '.swiper-pagination',
paginationClickable :true,
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});

例2：成组轮播

引用：

css:

.swiper-container {
margin-top:100px;
width: 1200px;
height: 100px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
border:1px solid #ccc;
height:98px;
width:118px !important;
}
.swiper-button-next,.swiper-button-prev{
border:1px solid #ccc;
}
.w{position:relative;}

html:

<div class="w">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
<div class="swiper-slide">Slide 11</div>
<div class="swiper-slide">Slide 12</div>
<div class="swiper-slide">Slide 13</div>
<div class="swiper-slide">Slide 14</div>
<div class="swiper-slide">Slide 15</div>
<div class="swiper-slide">Slide 16</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>

js:

var swiper = new Swiper('.swiper-container', {
slidesPerView:10, //默认页面显示多少个
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});

例3：含有缩略图的轮播效果

引用：

css:

.swiper-container {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.gallery-top {
height: 80%;
width: 100%;
}
.gallery-thumbs {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
opacity: 1;
}

html:

js:

var galleryTop = new Swiper('.gallery-top', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 10,
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true
});
galleryTop.params.control = galleryThumbs;
galleryThumbs.params.control = galleryTop;

在官网中有很多例子，api文档中也介绍了相关参数的使用方法。

注：

1）如果页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js。

2）初始化Swiper：最好是挨着</body>标签；如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。window.onload = function() {} 或者$(document).ready(function () {})。

3）swiper插件版本3.X和2.X之间的还是有一定差距的，在ie9中版本3.X有些效果是无效的，如果考虑pc端的兼容性问题的话，还是使用2.X比较好。

引用swiper官网中的介绍：“Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择Swiper2.x（甚至支持IE7）。”

4）在项目中发现该插件不能很好地兼容Vue.js，在Vue.js中该swiper插件样式全乱了，具体的解决办法现在还没找到，如果有人有解决的方法，请告诉一下，谢谢啦。