Swiper学习笔记
09/26
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper 笔记</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
ul,li{list-style: none;}
.nav ul{
display: flex;
flex-flow: row;
justify-content: center;
}
.nav li{
float: left;
width:25%;
text-align: center;
}
.active-nav{
background-color: green;
color:#FFF;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container swiper-container1">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2<br>sdfsdfds</div>
<div class="swiper-slide">
<!--子切换 s-->
<div class="swiper-container swiper-container2">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 3->Child_1</div>
<div class="swiper-slide">Slide 3->Child_2</div>
</div>
</div>
<!--子切换 e-->
</div>
<div class="swiper-slide">Slide 4</div>
</div>
<div class="swiper-scrollbar"></div>
</div>
<div class="pagination1"></div>
<div class="nav">
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
</ul>
</div>
<div class="nav-tow">
<ul>
<li class="prev"> <- 上一页 </li>
<li class="next">下一页 -> </li>
</ul>
</div>
<!-- Swiper JS -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="../dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container1',{
initialSlide :0, //初始化默认索引
direction:'horizontal', //幻灯方向 vertical:上下 horizontal:左右
speed:1000, //切换速度
grabCursor:true, //鼠标覆盖Swiper时指针会变成手掌形状
// width:window.innerWidth, //强制Swiper的宽度(px) 这里设置为全屏 在隐藏状态下初始化时
autoHeight:true, // 自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
uniqueNavElements:true, //独立分页元素
on: { //on 注册事件
slideChange: function () { //幻灯切换事件
updateNavPosition(this.activeIndex);
},
},
autoplay:false,
// autoplay:{ //自动切换设置
// delay:1000, //自动切换的时间间隔，单位m
// disableOnInteraction:false, //用户操作swiper之后，是否禁止autoplay。默认为true：停止。
// waitForTransition:true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时
// },
//网格分布
slidesPerView:1, //设置slider容器能够同时显示的slides数量(carousel模式)
centeredSlides:false, //设定为true时，active slide会居中，而不是默认状态下的居左。
slidesPerGroup:1, //在carousel mode下定义slides的数量多少为一组
spaceBetween:20, //在slide之间设置距离（单位px） 默认 20
slidesPerColumn:1, //多行布局里面每列的slide数量,这里是设置多少列
slidesPerColumnFill:'row', //多行布局中以什么形式填充 默认 column
loop:false, //设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。loop模式在与free模式同用时会产生抖动，因为free模式下没有复制slide的时间点。
//进度
watchSlidesVisibility:'true', //开启watchSlidesVisibility选项前需要先开启watchSlidesProgress，如果开启了watchSlidesVisibility，则会在每个可见slide增加一个classname，默认为'swiper-slide-visible'。
noSwipingSelector:'input', //设置不可触摸滑动的元素，例如input
noSwipingClass : 'stop-swiping', //不可拖动块的类名，当noSwiping设置为true时，并且在slide（或其他元素）加上此类名，目标将无法触摸拖动。
observer:false, //启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
//分页器
pagination: { //分页器容器的css选择器或HTML标签。分页器等组件可以置于container之外，不同Swiper的组件应该有所区分，如#p1，#p2
el: '.pagination1',
type:'bullets', //分页器样式类型，可选 bullets’ 圆点（默认） fraction’ 分式 progressbar’ 进度条 custom’ 自定义
bulletElement:'li', //设定分页器指示器（小点）的HTML标签。默认：span
clickable:true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换
renderBullet:function(index,className){ //渲染分页器小点。这个参数允许完全自定义分页器的指示点。接受指示点索引和指示点类名作为参数。
return '<span class="' + className + '">'+ (index+1) +'</span>';
},
bulletClass:'swiper-pagination-bullet', //pagination分页器内元素的类名。 m
bulletActiveClass:'swiper-pagination-bullet-active', //pagination分页器内活动(active)元素的类名。
currentClass:'swiper-pagination-current', //分式类型分页器的当前索引的类名
totalClass:'swiper-pagination-total', //分式类型分页器总数的类名
clickableClass:'swiper-pagination-clickable', //可点击的pagination的类名。
},
//使用前进后退按钮来控制Swiper切换。
navigation:{
nextEl:'', //前进按钮的css选择器或HTML元素 默认：null
prevEl:'', //后退按钮的css选择器或HTML元素 默认：null
disabledClass:'swiper-button-disabled', //前进后退按钮不可用时的类名。
},
//为Swiper增加滚动条
scrollbar: {
el: '.swiper-scrollbar', //Scrollbar容器的css选择器或HTML元素
hide:true, //滚动条是否自动隐藏。默认：false，不会自动隐藏
},
});
var siper2 = new Swiper('.swiper-container2',{
nested:true, //用于嵌套相同方向的swiper时，当切换到子swiper时停止父swiper的切换
});
//自定义导航的幻灯
function updateNavPosition(index){
$('.nav ul li').removeClass('active-nav');
var activeNav = $('.nav ul li').eq(index).addClass('active-nav');
}
//点击按钮切换指定的幻灯
$('.nav li').click(function(){
var Sindex = $(this).index();
swiper.slideTo(Sindex,100,false);
});
//鼠标经过导航切换换 slide
var navObj = $('.nav ul li'); //拿到对象
for(var i=0;i<navObj.length;i++){ //遍历对象的长度
navObj[i].index = i; //每个 对象添加 index 属性并设置 导航的索引
navObj[i].onmouseover = function(){ //鼠标经过事件
swiper.slideTo(this.index); //切换到当前导航对应的索引 slide
};
//这是鼠标经过分页器切换slide s
swiper.pagination.bullets[i].index=i;
swiper.pagination.bullets[i].onmouseover=function(){
swiper.slideTo(this.index);
};
//这是鼠标经过分页器切换slide e
}
//上一个
$('.prev').on('click',function(){
swiper.slidePrev();
});
//下一个
$('.next').on('click',function(){
swiper.slideNext();
});
</script>
</body>
</html>
版权属于：
Dcr163的博客
本文链接：
https://www.dcr163.cn/188.html（转载时请注明本文出处及文章链接）
