1. 程式人生 > >swiper4-vue 不使用loop,由最後一張跳到第一張

swiper4-vue 不使用loop,由最後一張跳到第一張

key use ive sla fse level wip ESS line

<template>
<div class="swiper-box">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in slides" :key="index">
<img :src="item" :data-index="index">
</div>
</div>
</div>
<div class="swiper-add" id="add" @click="clickAdd">
<img src="../../assets/left/add.png">
</div>
<div class="swiper-text" >
<div>- 123 -</div>
<div>name<span></span><span>5星</span></div>
</div>
</div>
</template>
<script>
import Swiper from ‘../../../static/swiper.min.js‘;
import ‘../../../static/swiper.min.css‘;
export default {
props: {
slides: {
type: Array,
}
},
data() {
return {
mySwiper: {},
status: 1,
}
},

methods:{
initSwiper(){
this.mySwiper = new Swiper(‘.swiper-container‘, {
// loop: true,
// loopFillGroupWithBlank: true,
// grabCursor: true,
queueEndCallbacks: true,
centeredSlides: true,//
allowTouchMove: false, //不允許觸摸滑動
slidesPerView: 3,//設置slider容器能夠同時顯示的slides數量(carousel模式)。可以設置為數字(可為小數,小數不可loop),或者 ‘auto‘則自動根據slides的寬度來設定數量。loop模式下如果設置為‘auto‘還需要設置另外一個參數loopedSlides。
slidesPerGroup: 1,
// watchSlidesProgress : true,
// watchSlidesVisibility : true,
spaceBetween: 20,
// slidesOffsetBefore: 100,
// slidesOffsetAfter : 300,
initialSlide: 0,
observer:true,
observerParents:true,

});
this.$store.dispatch(‘getSwiperValue‘, this.mySwiper);
var self = this;
this.mySwiper.on(‘slideChangeTransitionEnd‘, function (swiper) { // 滑動之後執行
var $img = document.querySelector(‘.swiper-slide-active > img‘);
self.$store.dispatch(‘getSwiperIndex‘, $img.getAttribute(‘data-index‘)); // 得到第幾張圖片
console.log($img.getAttribute(‘data-index‘), this.slides.length - 1);
if(this.isEnd) { //最後一個
self.status = 2 // 修改狀態
}
});
},
//點擊下一張
clickAdd(){
if(this.status === 2){
this.mySwiper.slideTo(0, 1000, false); // 回跳到第一個
this.status = 1;
this.$store.dispatch(‘getSwiperIndex‘, 0); // 修改值,第一張圖片
} else {
this.mySwiper.slideNext(); // 下一張
}
},

},
mounted() {
this.initSwiper();
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.swiper-box {
position: relative;
width: 408px;
height: 248px;
background: url(‘../../assets/left/bg.png‘) no-repeat;
background-size: 100% auto;
}
.swiper-container {
width: 300px;
margin-left: 50px;
}
.swiper-slide {
text-align: center;
/* 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-add {
position: absolute;
right: 12px;
top: 82px;
}
.swiper-add img {
width: 40px;
height: 42px;
}

.swiper-text {
color: #ffffff;
text-align: center;
line-height:32px;
position: absolute;
left: 50%;
top: 78%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.swiper-text div:last-child {
color: #43FFD2;
font-size: 18px;
vertical-align: middle;
}
.swiper-text span:first-child {
display: inline-block;
width: 23px;
height: 26px;
margin: 0 4px 0 12px;
vertical-align: middle;
background: url(‘../../assets/left/level.png‘) no-repeat;
background-size: 100% auto;
}
.swiper-text span:last-child {
font-size: 12px;
vertical-align: middle;
}
.swiper-wrapper {
padding-top: 44px;
height: 110px;
}

.swiper-slide img {
width: 80px;
height: 80px;
}
.swiper-slide-active img {
width: 110px;
height: 110px;
}

</style>

swiper4-vue 不使用loop,由最後一張跳到第一張