大好好，我是 17。
雖然我是一個(gè)喜歡造輪子的人，但是對(duì)于 swiper，我還是直接拿過(guò)來(lái)用了，功能很多，也很方便。本文介紹一些常用的功能。
版本 Swiper 8.3.0
基本用法
<div class="swiper mySwiper">
<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>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
var swiper = new Swiper(".mySwiper", {
/**
* 設(shè)置Slide的切換效果，默認(rèn)為"slide"（普通位移切換），
* 還可設(shè)置為"fade"（淡入）、"cube"（方塊）、"coverflow"（3d流）、
* "flip"（3d翻轉(zhuǎn)）、"cards"(卡片式)、"creative"（創(chuàng)意性）。
*/
effect:slide,
//自動(dòng)播放
autoplay:true,
// 垂直切換
direction: "vertical",
// slider容器能夠同時(shí)顯示的 slides 數(shù)量
slidesPerView: 3,
// 在slide之間設(shè)置距離(px）
spaceBetween: 10,
// 定義slides的數(shù)量多少為一組，就是一頁(yè)切換多少個(gè)slides
slidesPerGroup: 3,
// 重復(fù)
loop: true,
/**
* 默認(rèn)情況下Swiper 每次滑動(dòng)時(shí)只滑動(dòng)一個(gè)Slide，并且會(huì)自動(dòng)貼合Wrapper。
* 開啟自由模式后，Swiper 會(huì)根據(jù)慣性滑動(dòng)可能不止一格且不會(huì)貼合。
*
* 自由模式影響的是鼠標(biāo)拖動(dòng)或touch移動(dòng)，分頁(yè)器不受影響。
*/
freeMode:false,
/**
* 居中幻燈片。設(shè)定為true時(shí)，當(dāng)前的active slide 會(huì)居中，而不是默認(rèn)狀態(tài)下的居左。
*
* 一般來(lái)說(shuō)，要配置 loop:true 一起使用，否則初始的時(shí)候，并沒有居中的效果。
*/
centeredSlides: true,
//左右切換按鈕
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
//分頁(yè)
pagination: {
el: ".swiper-pagination",
clickable: true,
},
on:{
click: function(e){
// 打印當(dāng)前索引
console.log(e.activeIndex)
}
},
});
我把所有常用配置的都寫上了，不需要哪個(gè)直接刪除就好。
最外層的 swiper 的樣式
margin-left: auto;
margin-right: auto;
position: relative;
并沒有設(shè)置高寬，需要使用者來(lái)設(shè)置寬高，如果外層容器比它寬，它會(huì)左右居中顯示。
內(nèi)層的 swiper-wraper 的樣式
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
大小與 swiper 相同。里面的 swiper-slide 從左到右依次排列。默認(rèn)效果 effect:'slide'，就是左路右滑動(dòng)的效果。通過(guò)在 swiper-wraper上 每次更改 transform: translate3d(X,0,0) 的 X 值，形成動(dòng)畫。所以我們可以更改通過(guò)改變 animation-timing-function 來(lái)更改緩動(dòng)效果。樣式中已經(jīng)指定的 duration 為 2s ，但不會(huì)生效，duration 只能通過(guò) js 由 speed 參數(shù)來(lái)修改。不過(guò)，樣式中的 0.2s delay 是有效的。
.swiper-wrapper{
/* 通過(guò)改變animation-timing-function 制作彈性切換效果 */
transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
}
var swiper = new Swiper('.swiper-container', {
speed: 2000,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
swiper-slider 的樣式是
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform
}
當(dāng)給 swiper-slider 加 border 的時(shí)候，由于外面的 swiper overflow:hidden會(huì)導(dǎo)致 邊框顯示不全。所以我們需要給 swiper-slider class 增加一條樣式
box-sizing:border-box;
分頁(yè)器
pagination: {
el: ".swiper-pagination",
type: "fraction",
}
type有幾種
- ‘bullets’ 圓點(diǎn)（默認(rèn)）
- ‘fraction’ 分式 ，形如 (1/10)
- ‘progressbar’ 進(jìn)度條 ，在頂部的一個(gè)細(xì)長(zhǎng)條，頁(yè)碼越大，長(zhǎng)條越長(zhǎng)。
或者是自定義
.swiper-pagination-bullet {
/*自定義分頁(yè)器樣式 */
}
.swiper-pagination-bullet-active {
/*自定義 當(dāng)前 分頁(yè)器樣式 */
}
pagination: {
el: ".swiper-pagination",
clickable: true,
//自定義分頁(yè)器 html
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
立體效果
.swiper-slide {
transition-duration: .2s;
transform: scale(0.8);
}
.swiper-slide-active,.swiper-slide-duplicate-active{
transform: scale(1);
}
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
從樣式可以看出，是中間大，兩邊小。加上 transition后，尺寸切換會(huì)變得平滑。
左右各露出一部分
.swiper-slide {
width: 60%;
}
var swiper = new Swiper('.mySwiper', {
slidesPerView: 'auto',
spaceBetween: 60,
centeredSlides: true,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
原本是只顯示一個(gè) slide，但樣式上指定 width: 60%; js 又指定 centeredSlides: true后，左右兩邊就會(huì)有一部分顯示出來(lái)。
縮略圖控制
<div class="swiper swiper-big">
<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>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="swiper swiper-small">
<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>
</div>
var swiperSmall = new Swiper(".swiper-small", {
loop:true,
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
});
new Swiper(".swiper-big", {
loop:true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiperSmall,
},
});
大圖 swiper 和小圖 swiper 是完全分開的。swiper: swiperSmall 將大小圖關(guān)聯(lián)在一起。
小圖的 watchSlidesProgress: true 是必須的。 slidesPerView 應(yīng)該大于1。
要想循環(huán)的話，兩個(gè) swiper 都需要寫上 loop:true
定位錨點(diǎn)
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" data-hash="slide1">slider1</div>
<div class="swiper-slide" data-hash="slide2">slider2</div>
<div class="swiper-slide" data-hash="slide3">slider3</div>
</div>
</div>
new Swiper('.swiper',{ hashNavigation: true, })
視差效果
網(wǎng)頁(yè)效果
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-100">從右邊100px開始進(jìn)入</div>
<div class="subtitle" data-swiper-parallax="-200">從右邊200px開始進(jìn)入</div>
<div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
<p>從右邊300px開始進(jìn)入，時(shí)間600ms</p>
</div>
<div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度變化</div>
<div data-swiper-parallax-scale="0.15" >縮放變化</div>
</div>
</div>
var mySwiper = new Swiper('.swiper',{ parallax : true, })
響應(yīng)式設(shè)置
縮小放大網(wǎng)頁(yè)寬度查看
頁(yè)面效果
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 4,
spaceBetween: 40,
},
1024: {
slidesPerView: 5,
spaceBetween: 50,
},
},
不是階躍式的變化，而是逐漸變化，這樣會(huì)對(duì)內(nèi)容有較高的要求。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-721966.html
常用函數(shù)
- mySwiper.slideNext(speed, runCallbacks)
- mySwiper.slidePrev(speed,runCallbacks)
- mySwiper.slideTo(index, speed, runCallbacks)
- mySwiper.slideToLoop(index, speed, runCallbacks)
其它應(yīng)用
除了 slide 切換功能，swiper還可以用作滾動(dòng)容器，有自定義滾動(dòng)條。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-721966.html
到了這里，關(guān)于使用 swiper 做輪播圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
