文章目录
slidesPerView
(1)设置slider容器能够同时显示的slides数量。
(2)可选值:number/‘auto’ – 注意:auto必须在引号之内。
(3)默认值:1
(4)注意:动态变换该属性时可以从’auto’–>number ,也可以从’number’ – >‘number’。但是无法从’number’–>‘auto’(原因未知)
centeredSlides
(1)默认情况下active slide会靠在左边,设置该属性为true时,active slide会居中
(2)默认值:false
centeredSlidesBounds
(1)当设置了Active Slide居中后,还可以配合设置此参数,使得第一个和最后一个Slide 始终贴合边缘。
(2)默认值:false
slidesPerGroup
(1)定义slides的数量多少为一组进行滑过
(2)默认值:1
slidesPerGroupSkip
(1)在设置了slidesPerGroup的基础上,设置跳过分组。设置的前几个slide将不计入分组之内。
(2)默认值:0
spaceBetween
(1)在slide之间设置距离(单位px)
(2)默认值:0
slidesPerColumn
(1)设置多行布局里面每列的slide数量。
(2)该属性需要在swiper-slide上设置height的高度来配合使用才能有效。
(3)如果slidesPerColumn初始话时的值为1,那么后面动态更改时会出现slide没有换行的问题(原因未知)
(3)注:slidesPerColumn目前还不兼容loop模式(loop: true)。
slidesPerColumnFill
多行布局中以什么形式填充:
| ‘column’(列) | ‘row’(行) |
| 1 3 5 | 1 2 3 |
| 2 4 6 | 4 5 6 |
slidesOffsetBefore
(1)设定slide与左边框的预设偏移量(单位px)
(2)默认值:0
slidesOffsetAfter
(1)设定slide与右边框的预设偏移量(单位px)
(2)注:slidesPerColumn != 1时,该属性无效(原因未知)
centerInsufficientSlides
(1)开启这个参数,当slides的总数小于slidesPerView时,slides居中。
(2)不适用于loop模式和slidesPerColumn
代码
.swiper-container {
width: 600px;
height: 300px;
text-align: center;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
#mySwiper4 .swiper-slide-active {
background: #ff6600;
color: #fff;
}
.swiper-box {
width: 600px;
text-align: center;
margin: 30px;
}
.button-box {
display: flex;
justify-content: space-around;
}
.button {
height: 50px;
line-height: 50px;
border-radius: 5px;
text-align: center;
padding: 0px 10px;
margin-top: 20px;
background: rgba(6, 6, 6, 0.2);
color: #666;
cursor: pointer;
}
.button:hover {
transform: scale(1.1);
}
.button-active {
background: rgba(255, 0, 0, 0.2);
color: #f00;
}
.height33 {
height: 33%;
}
.height50 {
height: 50%;
}
</style>
<body style="display:flex;justify-content:space-around;flex-wrap: wrap;">
<div class="swiper-box">
<div class="swiper-container" id="mySwiper4">
<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>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="button-box">
<div onclick="centeredSlides()" class="button" id="centeredSlides">centeredSlides--居中设置
</div>
<div onclick="removeCenteredSlides()" class="button button-active" id="removeCenteredSlides">
centeredSlides--取消设置</div>
</div>
<div class="button-box">
<div onclick="centeredSlidesBounds()" class="button" id="SlidesBounds">centeredSlides--设置顶边</div>
<div onclick="removeCenteredSlidesBounds()" class="button button-active" id="removeSlidesBounds">
centeredSlides--取消顶边</div>
</div>
</div>
<div class="swiper-box">
<div class="swiper-container" id="mySwiper5">
<div class="swiper-wrapper">
<div class="swiper-slide" style="width:20%;background-color: #f00;">width:20%</div>
<div class="swiper-slide" style="width:20%;background-color: #ff0;">width:20%</div>
<div class="swiper-slide" style="width:30%;background-color: #f0f;">width:30%</div>
<div class="swiper-slide" style="width:40%;background-color: #fff;">width:40%</div>
<div class="swiper-slide" style="width:50%;background-color: #00f;">width:50%</div>
<div class="swiper-slide" style="width:60%;background-color: #0f0;">width:60%</div>
<div class="swiper-slide" style="width:70%;background-color: #0ff;">width:70%</div>
<div class="swiper-slide" style="width:80%;background-color: #aaa;">width:80%</div>
<div class="swiper-slide" style="width:90%;background-color: #0aa;">width:90%</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="button-box">
<div onclick="slidesPerView(this,3)" class="button">slidesPerView:3
</div>
<!-- <div οnclick="slidesPerViewAuto()" class="button button-active" id="slidesPerViewAuto">
slidesPerView:auto</div> -->
</div>
<div class="button-box">
<div class="button button-active" id="centeredSlides">slidesOffsetAfter:100</div>
</div>
<div class="button-box">
<div onclick="slidesPerGroup1()" class="button button-active" id="slidesPerGroup1">slidesPerGroup:1
</div>
<div onclick="slidesPerGroup3()" class="button" id="slidesPerGroup3">
slidesPerGroup:3</div>
</div>
<div class="button-box">
<div onclick="slidesPerGroupSkip()" class="button button-active" id="slidesPerGroupSkip">
slidesPerGroupSkip:0
</div>
<div onclick="slidesPerGroupSkip3()" class="button" id="slidesPerGroupSkip3">
slidesPerGroupSkip:3</div>
</div>
<div class="button-box">
<div onclick="spaceBetween()" class="button button-active" id="spaceBetween">spaceBetween:0
</div>
<div onclick="spaceBetween20()" class="button" id="spaceBetween20">
spaceBetween:20</div>
</div>
</div>
<div class="swiper-box">
<div class="swiper-container" id="mySwiper6">
<div class="swiper-wrapper">
<div class="swiper-slide" style="height:50%;background-color: #f00;">slide 1</div>
<div class="swiper-slide" style="height:50%;background-color: #ff0;">slide 2</div>
<div class="swiper-slide" style="height:50%;background-color: #f0f;">slide 3</div>
<div class="swiper-slide" style="height:50%;background-color: #fff;">slide 4</div>
<div class="swiper-slide" style="height:50%;background-color: #00f;">slide 5</div>
<div class="swiper-slide" style="height:50%;background-color: #0f0;">slide 6</div>
<div class="swiper-slide" style="height:50%;background-color: #0ff;">slide 7</div>
<div class="swiper-slide" style="height:50%;background-color: #aaa;">slide 8</div>
<div class="swiper-slide" style="height:50%;background-color: #0aa;">slide 9</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="button-box">
<div class="button button-active" id="centeredSlides">slidesOffsetBefore:100</div>
</div>
<div class="button-box">
<div onclick="slidesPerView(this,1)" class="button">slidesPerView:1</div>
<div onclick="slidesPerView(this,2)" class="button">slidesPerView:2</div>
<div onclick="slidesPerView(this,3)" class="button button-active">slidesPerView:3</div>
</div>
<div class="button-box">
<div onclick="slidesPerColumn(this,1)" class="button" id="centeredSlides">slidesPerColumn:1</div>
<div onclick="slidesPerColumn(this,2)" class="button button-active" id="centeredSlides">slidesPerColumn:2</div>
<div onclick="slidesPerColumn(this,3)" class="button" id="removeCenteredSlides">slidesPerColumn:3</div>
</div>
</div>
<div class="swiper-box">
<div class="swiper-container" id="mySwiper7">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color: #f00;">slide 1</div>
<div class="swiper-slide" style="background-color: #ff0;">slide 2</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="button-box">
<div class="button button-active" id="centeredSlides">centerInsufficientSlides:true</div>
<div class="button button-active" id="centeredSlides">slidesPerView:5</div>
</div>
</div>
<script rel="stylesheet" src="../js/swiper.min.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/swiper4.js"></script>
</body>
let mySwiper4 = new Swiper('#mySwiper4', {
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 3,
centeredSlides: false,
});
let mySwiper5 = new Swiper('#mySwiper5', {
initialSlide: 8,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 'auto',
slidesPerGroup: 1,
slidesPerGroupSkip: 0,
spaceBetween: 0,
slidesOffsetAfter: 100,
});
let mySwiper6 = new Swiper('#mySwiper6', {
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 3,
slidesPerColumn: 2, //如果默认值是1的话,后面动态更改时会出现问题,并且该值要配合swiper-slide的height属性一起更改才能有效
slidesPerColumnFill: 'row',
slidesOffsetBefore: 100,
slidesOffsetAfter: 100, //无效
});
let mySwiper7 = new Swiper('#mySwiper7', {
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 5,
centerInsufficientSlides: true,
});
function changeActive(id1, id2) {
if (!$(id1).hasClass("button-active")) {
$(id1).addClass("button-active");
$(id2).removeClass("button-active");
}
}
function centeredSlides() {
changeActive("#centeredSlides", "#removeCenteredSlides");
mySwiper4.params.centeredSlides = true;
mySwiper4.update();
}
function removeCenteredSlides() {
changeActive("#removeCenteredSlides", "#centeredSlides");
$("#removeSlidesBounds").addClass("button-active");
$("#SlidesBounds").removeClass("button-active");
mySwiper4.params.centeredSlides = false;
mySwiper4.params.centeredSlidesBounds = false;
mySwiper4.update();
}
function centeredSlidesBounds() {
if (!$("#centeredSlides").hasClass("button-active")) {
alert("未选择centeredSlides,无法选择该选项")
} else {
changeActive("#SlidesBounds", "#removeSlidesBounds");
mySwiper4.params.centeredSlidesBounds = true;
mySwiper4.update();
}
}
function removeCenteredSlidesBounds() {
changeActive("#removeSlidesBounds", "#SlidesBounds");
mySwiper4.params.centeredSlidesBounds = false;
mySwiper4.update();
}
function slidesPerView(_this, num) {
let id = $(_this).parent().parent().children('.swiper-container').attr("id");
if (id == "mySwiper5") {
// changeActive("#slidesPerView", "#slidesPerViewAuto");
$(_this).addClass('button-active');
mySwiper5.params.slidesPerView = num;
mySwiper5.update();
} else if (id == "mySwiper6") {
$(_this).parent().children().removeClass('button-active');
$(_this).addClass('button-active');
mySwiper6.params.slidesPerView = num;
mySwiper6.update();
}
}
function slidesPerViewAuto() {
changeActive("#slidesPerViewAuto", "#slidesPerView");
mySwiper5.params.slidesPerView = "'auto'";
mySwiper5.update();
}
function slidesPerGroup1() {
changeActive("#slidesPerGroup1", "#slidesPerGroup3");
$("#slidesPerGroupSkip").addClass("button-active");
$("#slidesPerGroupSkip3").removeClass("button-active");
mySwiper5.params.slidesPerGroup = 1;
mySwiper5.update();
}
function slidesPerGroup3() {
changeActive("#slidesPerGroup3", "#slidesPerGroup1");
mySwiper5.params.slidesPerGroup = 3;
mySwiper5.update();
}
function slidesPerGroupSkip() {
changeActive("#slidesPerGroupSkip", "#slidesPerGroupSkip3");
mySwiper5.params.slidesPerGroupSkip = 0;
mySwiper5.update();
}
function slidesPerGroupSkip3() {
if (!$("#slidesPerGroup3").hasClass("button-active")) {
alert("未选择slidesPerGroup:3,无法选择该选项")
} else {
changeActive("#slidesPerGroupSkip3", "#slidesPerGroupSkip");
mySwiper5.params.slidesPerGroupSkip = 3;
mySwiper5.update();
}
}
function spaceBetween() {
changeActive("#spaceBetween", "#spaceBetween20");
mySwiper5.params.spaceBetween = 0;
mySwiper5.update();
}
function spaceBetween20() {
changeActive("#spaceBetween20", "#spaceBetween");
mySwiper5.params.spaceBetween = 20;
mySwiper5.update();
}
function slidesPerColumn(_this, num) {
let height = (100 / num) + '%';
$(_this).parent().parent().children(".swiper-container").children(".swiper-wrapper").children().css("height", height);
$(_this).parent().children().removeClass('button-active');
$(_this).addClass('button-active');
mySwiper6.params.slidesPerColumn = num;
mySwiper6.update();
}