vue使用swiper插件實(shí)現(xiàn)垂直輪播圖
更新時(shí)間：2023年01月14日 10:55:17 作者：零Suger
這篇文章主要介紹了vue使用swiper插件實(shí)現(xiàn)垂直輪播圖，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
使用swiper插件做垂直輪播圖
1.下載安裝
cnpm install swiper vue-awesome-swiper --save
2.main.js：
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import "swiper/swiper-bundle.min.css";
Vue.use(VueAwesomeSwiper)
//配置分頁器
import {Swiper as SwiperClass,Pagination} from 'swiper';
SwiperClass.use([Pagination]);
3.vue頁面：
<template>
<div v-swiper:mySwiper="swiperOption">
<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" slot="pagination"></div>
</div>
</template>
<script>
export default {
data() {
return {
swiperOption: {
direction: "vertical", //設(shè)置豎向輪播
pagination: {
el: ".swiper-pagination",
clickable:true,
},
on: {
slideChangeTransitionEnd: function () {
// this.activeIndex 是索引index，這個(gè)用this才可以獲取到
console.log(this.activeIndex);
},
},
},
};
},
mounted() {
this.mySwiper.slideTo(0, 1000, false);
},
};
</script>
<style scoped>
.swiper-container {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.swiper-slide {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
font-size: 2rem;
}
</style>
效果圖：
注：我安裝的當(dāng)前版本是"swiper": “^7.3.3”,“vue-awesome-swiper”: “^4.1.1”,
swiper輪播插件使用 一次顯示多個(gè)slides
**項(xiàng)目中需要實(shí)現(xiàn)下圖效果 **
demo 代碼 拿來即用,引用的地址是 CDN 資源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<!-- <link rel="stylesheet" href="../package/swiper-bundle.min.css"> -->
<link rel="stylesheet" >
<!-- 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%;
height: 210px;
position: absolute;
left: 0;
bottom: 11px;
}
.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;
}
.swiper-button-prev,
.swiper-button-next {
width: 56px;
height: 56px;
background: #9999;
border-radius: 50%;
font-size: 16px;
color: #ffff;
}
.swiper-button-prev:after,
.swiper-button-next:after {
font-size: 28px;
}
.swiper_item {
font-size: 14px;
/* opacity: 0.3; */
background: transparent;
}
.track_box {
height: 100%;
margin-right: 10px;
background: #fff;
border-radius: 5px;
box-sizing: border-box;
overflow: hidden;
}
.track_time {
width: 50px;
height: 100%;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
line-height: 32px;
font-size: 12px;
background: #6e6e6e;
color: #FFFFFF;
border-radius: 5px;
letter-spacing: 0.2em;
}
.track_interval {
background: #3385ff;
color: #fff;
height: 30px;
line-height: 30px;
text-align: left;
padding: 0 0 0 10px;
}
.track_box .text {
height: calc(100% - 36px);
overflow: hidden;
padding: 0 10px;
}
.text p {
line-height: 1.8em;
}
.text div {
text-align: left;
color: #3385ff;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
</div>
<!-- 如果需要導(dǎo)航按鈕 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- Swiper JS -->
<!-- <script src="../package/swiper-bundle.min.js"></script> -->
<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
<!-- Initialize Swiper -->
<script>
var strText = `
<div class="swiper-slide swiper_item" >
<div class="track_box">
<div class="track_interval">時(shí)間: 10/22 10:25-12:48</div>
<div class="text">
<p>從:河南省鄭州市中原區(qū)山寨街道嵩山南路,河南工業(yè)大學(xué)(嵩山路校區(qū))</p>
<p>到: 從:河南省鄭州市中原區(qū)山寨街道嵩山南路,河南工業(yè)大學(xué)(嵩山路校區(qū))</p>
<div>形勢時(shí)間: 2小時(shí)23分鐘</div>
</div>
</div>
<div class="track_time">
停留時(shí)間常3個(gè)小時(shí)12分鐘
</div>
</div>
`;
for(var i = 0 ; i < 3 ; i++){
$('.swiper-wrapper').append(strText);
}
var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto', //設(shè)置slider容器能夠同時(shí)顯示的slides數(shù)量(carousel模式)。
autoplay: false, //設(shè)置為true啟動(dòng)自動(dòng)切換，并使用默認(rèn)的切換設(shè)置。
direction: 'vertical', //設(shè)置滑動(dòng)方向
centeredSlides: false, //設(shè)定為true時(shí)，active slide會(huì)居中，而不是默認(rèn)狀態(tài)下的居左。
observeParents: true, //這個(gè)是啟動(dòng)動(dòng)態(tài)檢查器(OB/觀眾/觀看者)，當(dāng)改變swiper的樣式（例如隱藏/顯示）或者修改swiper的子元素時(shí)，自動(dòng)初始化swiper。
grabCursor: true, //置為true時(shí)，鼠標(biāo)覆蓋Swiper時(shí)指針會(huì)變成手掌形狀，拖動(dòng)時(shí)指針會(huì)變成抓手形狀。（根據(jù)瀏覽器形狀有所不同）
autoplayDisableOnInteraction: false, //是否禁止autoplay。默認(rèn)為true：停止。
mousewheel: { //開啟鼠標(biāo)滾輪控制Swiper切換?？稍O(shè)置鼠標(biāo)選項(xiàng)，或true使用默認(rèn)值。 默認(rèn)1
sensitivity : 2,
},
autoHeight: true, //自動(dòng)高度。設(shè)置為true時(shí)，wrapper和container會(huì)隨著當(dāng)前slide的高度而發(fā)生變化。
observer: true, //修改swiper自己或子元素時(shí)，自動(dòng)初始化swiper
preventClicks : false, //默認(rèn)true
preventClicksPropagation : true, //阻止click冒泡。拖動(dòng)Swiper時(shí)阻止click事件
slideToClickedSlide:true, //設(shè)置為true則點(diǎn)擊slide會(huì)過渡到這個(gè)slide。
scrollbar: { //為Swiper增加滾動(dòng)條。
el: '.swiper-container',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
</html>
居于右側(cè)貼邊顯示 ,以鼠標(biāo)滾動(dòng)滑動(dòng)列表(調(diào)整了css.和 swiper 配置屬性)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<!-- <link rel="stylesheet" href="../package/swiper-bundle.min.css"> -->
<link rel="stylesheet" >
<!-- 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: 300px;
height: 100%;
position: absolute;
bottom: 0;
right: 5px;
}
.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;
}
.swiper-button-prev,
.swiper-button-next {
width: 56px;
height: 56px;
background: #9999;
border-radius: 50%;
font-size: 16px;
color: #ffff;
}
.swiper-button-prev:after,
.swiper-button-next:after {
font-size: 28px;
}
.swiper_item {
font-size: 14px;
flex-direction: column;
background: transparent;
}
.track_box {
height: 100%;
background: #fff;
border-radius: 5px;
box-sizing: border-box;
overflow: hidden;
margin: 5px 0;
}
.track_time {
width: 100%;
height: auto;
line-height: 32px;
font-size: 12px;
background: #e5e5e5;
color: #333;
border-radius: 5px;
letter-spacing: 0.2em;
font-weight: 600;
}
.track_interval {
height: 30px;
line-height: 30px;
text-align: left;
padding: 0 0 0 10px;
}
.track_box .text {
padding: 0 10px;
}
.text p {
line-height: 1em;
}
.text div {
text-align: left;
color: #3385ff;
}
.track_time,
.track_box {
border: 1px solid #d8d8d7;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper" id="xc">
</div>
</div>
<!-- Swiper JS -->
<!-- <script src="../package/swiper-bundle.min.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
<!-- Initialize Swiper -->
<script>
var strText = `
<div class="swiper-slide swiper_item" >
<div class="track_box">
<div class="track_interval">時(shí)間: 10/22 10:25-12:48</div>
<div class="text">
<p>從:河南省鄭州市中原區(qū)山寨街道嵩山南路,河南工業(yè)大學(xué)(嵩山路校區(qū))</p>
<p>到: 從:河南省鄭州市中原區(qū)山寨街道嵩山南路,河南工業(yè)大學(xué)(嵩山路校區(qū))</p>
<div>形勢時(shí)間: 2小時(shí)23分鐘</div>
</div>
</div>
<div class="track_time">
停留時(shí)間常3個(gè)小時(shí)12分鐘
</div>
</div>
`;
for(var i = 0 ; i < 3 ; i++){
$('.swiper-wrapper').append(strText);
}
var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto', //設(shè)置slider容器能夠同時(shí)顯示的slides數(shù)量(carousel模式)。
autoplay: false, //設(shè)置為true啟動(dòng)自動(dòng)切換，并使用默認(rèn)的切換設(shè)置。
direction: 'vertical', //設(shè)置滑動(dòng)方向
centeredSlides: false,
grabCursor: true, //置為true時(shí)，鼠標(biāo)覆蓋Swiper時(shí)指針會(huì)變成手掌形狀，拖動(dòng)時(shí)指針會(huì)變成抓手形狀。（根據(jù)瀏覽器形狀有所不同）
autoplayDisableOnInteraction: false, //是否禁止autoplay。默認(rèn)為true：停止。
mousewheel: true, //開啟鼠標(biāo)滾輪控制Swiper切換?？稍O(shè)置鼠標(biāo)選項(xiàng)，或true使用默認(rèn)值。
autoHeight: true, //自動(dòng)高度。設(shè)置為true時(shí)，wrapper和container會(huì)隨著當(dāng)前slide的高度而發(fā)生變化。
});
</script>
</body>
</html>
Swiper 動(dòng)態(tài)加載數(shù)據(jù)遇到的坑
我們在寫項(xiàng)目的時(shí)候，很多swiper的數(shù)據(jù)都是動(dòng)態(tài)獲取到的，我們在剛進(jìn)入頁面的時(shí)候，初始化了swiper，但是當(dāng)我們加載成功數(shù)據(jù)后（比如ajax獲取數(shù)據(jù)），swiper的子元素被改變了，于是swiper就不能正常執(zhí)行了
主要代碼，就是下面的屬性
observer: true, //修改swiper自己或子元素時(shí)，自動(dòng)初始化swiper observeParents: true, //修改swiper的父元素時(shí)，自動(dòng)初始化swiper
如果上面的方法還不行:
其實(shí)還有另一種方法，就是在加載數(shù)據(jù)成功之后，再次初始化swiper
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js計(jì)算屬性computed用法實(shí)例分析
這篇文章主要介紹了vue.js計(jì)算屬性computed用法,結(jié)合實(shí)例形式分析了vue.js使用computed方式進(jìn)行屬性計(jì)算的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
Vue監(jiān)聽localstorage變化的方法詳解
在日常開發(fā)中,我們經(jīng)常使用localStorage來存儲一些變量,這些變量會(huì)存儲在瀏覽中,對于localStorage來說,即使關(guān)閉瀏覽器,這些變量依然存儲著,方便我們開發(fā)的時(shí)候在別的地方使用,本文就給大家介紹Vue如何監(jiān)聽localstorage的變化,需要的朋友可以參考下2023-10-10
Vscode如何創(chuàng)建vue項(xiàng)目
這篇文章主要介紹了Vscode如何創(chuàng)建vue項(xiàng)目問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
Vue+Echarts實(shí)現(xiàn)繪制動(dòng)態(tài)折線圖
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)繪制動(dòng)態(tài)折線圖，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
vue實(shí)現(xiàn)類似淘寶商品評價(jià)頁面星級評價(jià)及上傳多張圖片功能
最近在寫一個(gè)關(guān)于vue的商城項(xiàng)目，然后集成在移動(dòng)端中，開發(fā)需求中有一界面，類似淘寶商城評價(jià)界面！接下來通過本文給大家分享vue實(shí)現(xiàn)類似淘寶商品評價(jià)頁面星級評價(jià)及上傳多張圖片功能，需要的朋友參考下吧2018-10-10
這篇文章主要介紹了vue使用自定義指令來控制頁面按鈕組的權(quán)限思想，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue?實(shí)現(xiàn)動(dòng)態(tài)設(shè)置元素的高度
這篇文章主要介紹了在vue中實(shí)現(xiàn)動(dòng)態(tài)設(shè)置元素的高度，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue2項(xiàng)目如何將webpack遷移為vite并使用svg解決所有bug問題
這篇文章主要介紹了vue2項(xiàng)目如何將webpack遷移為vite并使用svg解決所有bug問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue分頁插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
Vue 刷新當(dāng)前路由的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue 刷新當(dāng)前路由的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09