0
点赞
收藏
分享

微信扫一扫

Swiper

夏沐沐 2022-07-12 阅读 61

Swiper是一个功能插件,移动端、PC端均可使用。

有JS版本的,也有基于JQ版本的

meta标签 移动端 自适应

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

最简单的版本,没有按钮,和左右按钮的轮播图:

<link rel="stylesheet" href="../dist/css/swiper.min.css">

修改左右按钮 :

.swiper-button-next,.swiper-button-prev{    background: none;}

布局:

<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>
</div>

 引入以及JS初始化:

<script src="../dist/js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container');
</script>

 JQ的swiper

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../images/1.jpg" alt=""/></div>
<div class="swiper-slide"><img src="../images/2.jpg" alt=""/></div>
<div class="swiper-slide"><img src="../images/3.jpg" alt=""/></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>

<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

<!-- 如果需要滚动条
<div class="swiper-scrollbar"></div>-->
</div>
<!--导航等组件可以放在container之外-->
</body>
<script src="http://static.yuntongauto.com/js/jquery-1.9.1.min.js"></script>
<script src="js/swiper-3.4.2.jquery.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
// direction: 'vertical', 垂直
// direction: 'horizonta', 水平 默认
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
paginationClickable: true,/*此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。*

// 如果需要前进后退按钮 
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev'
    /* // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',

scrollbarHide: false  滚动条隐藏:true 隐藏 false 显示

*/ 
})
</script>

各种属性对应的类型

/*两个swiper-slide之间的空白*/
spaceBetween: 30

  

/*显示的模块数量 为2 auto 是按大小自动显示*/
slidesPerView : 2,//'auto

 

/*滑动时 使得中间模块在中间*/
centeredSlides: true,

  

/*默认为false,普通模式:slide滑动时只滑动一格,并自动贴合wrapper,
设置为true则变为free模式,slide会根据惯性滑动且不会贴合*/
freeMode: true

  

/*设置为true时,鼠标覆盖Swiper时指针会变成手掌形状*/
grabCursor: true

  

/*多行布局里面每列的slide数量。*/
slidesPerColumn: 2,

  

<div class="swiper-container" dir="rtl"> 从右边向左边展示

  

/*循环轮播图*/
loop: true

  

/*是否键盘切换。设置为true时,能使用键盘方向键控制slide滑动。*/
keyboardControl: true

mousewheelControl: true  鼠标滚轮控制

/*自动切换的时间间隔(单位ms)*/
autoplay: 2500,
/*如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay*/
autoplayDisableOnInteraction: false
/*反方向操作
setInterval("mySwiper.slidePrev()", 2000);*/

 

/*切换效果,默认为"slide"(位移切换),值:"fade"(淡入)"cube"(方块)"coverflow"(3d流)"flip"(3d翻转)*/
effect: 'fade'

3d:

Swiper_分页

overflow

Swiper_轮播图_02

 

 cube:

Swiper_轮播图_03

 

嵌套轮播图:

html:

<div class="swiper-container swiper-container-h">
<div class="swiper-wrapper">
<div class="swiper-slide">Horizontal Slide 1</div>
<div class="swiper-slide">
横向轮播里嵌套的纵向轮播图
<div class="swiper-container swiper-container-v">
<div class="swiper-wrapper">
<div class="swiper-slide">Vertical Slide 1</div>
<div class="swiper-slide">Vertical Slide 2</div>
<div class="swiper-slide">Vertical Slide 3</div
</div>
<div class="swiper-pagination swiper-pagination-v"></div>
</div>
</div>
<div class="swiper-slide">Horizontal Slide 3</div>
<div class="swiper-slide">Horizontal Slide 4</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-h"></div>
</div>

  script:

<script>
//横向
var swiperH = new Swiper('.swiper-container-h', {
pagination: '.swiper-pagination-h',
paginationClickable: true,
spaceBetween: 50
});
//纵向
var swiperV = new Swiper('.swiper-container-v', {
pagination: '.swiper-pagination-v',
paginationClickable: true,
direction: 'vertical',
spaceBetween: 50
});
</script>

 

var classA = new Swiper('.classA', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 10,

loop:true,
     loopedSlides: 9 注意 循环轮播图 上下对应

});
var classB = new Swiper('.classB', {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2, 触摸距离与slide滑动距离的比率
slideToClickedSlide: true

loop:true,
     loopedSlides: 9 注意 循环轮播图 上下对应 相同

});
/*两个Swiper相互控制 就可以实现缩略图的轮播图*/
classA.params.control = classB;
classB.params.control = classA;

 一些不常用的:

/*默认为true,Swiper会强制加载所有图片*/
preloadImages: false,
// Enable lazy loading
/*设为true开启图片延迟加载,使preloadImages无效。
需要将图片img标签的src改写成data-src,并且增加类名swiper-lazy。
背景图的延迟加载则增加属性data-background(3.0.7开始启用)。
还可以为slide加一个预加载,<div class="swiper-lazy-preloader"></div>
或者白色的<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
当你设置了slidesPerView:'auto' 或者 slidesPerView > 1,还需要开启watchSlidesVisibility。*/
/*启用延迟加载*/
lazyLoading: true,

breakpoints: {
1024: {
slidesPerView: 4,
spaceBetween: 40
},
768: {
slidesPerView: 3,
spaceBetween: 30
},
640: {
slidesPerView: 2,
spaceBetween: 20
},
320: {
slidesPerView: 1,
spaceBetween: 10
}
}

断点设定:根据屏幕宽度设置某参数为不同的值,类似于响应式布局的media screen。
只有部分不需要变换布局方式和逻辑结构的参数支持断点设定,如slidesPerView、slidesPerGroup、 spaceBetween,而像slidesPerColumn、loop、direction、effect等则无效。

/*自动高度。设置为true时,wrapper和container会随着当前slide的高度而发生变化*/
autoHeight: true,

/*分页器 ‘bullets’  圆点(默认),‘fraction’ 分式 ,‘progress’  进度条 ,‘custom’ 自定义*/
paginationType: 'fraction'

版本之间也有一些差异:

 

swiper3.x

swiper2.x

引入文件

swiper.min.js

swiper.min.css

idangerous.swiper.min.js

idangerous.swiper.css

移动机制

transform

transform或left/top

布局方式

flex或一般布局,wrapper宽度为第一个slide

一般布局,wrapper宽度为slide总和

更新

正在更新

停止更新 最新版本2.7.6

兼容性

部分PC端浏览器,主流移动端浏览器

PC端浏览器,IE7+,部分移动端浏览器



举报

相关推荐

0 条评论