Invalid loop setting true in vue-awesome-swiper
invalid loop setting true in vue-awesome-swiper
the data is loaded dynamically, and I can"t find the answers to my related questions on the Internet.
is placed in the sub-component, and the home page directly introduces the
of this swiper sub-component.
related codes
<div class="wrapper" :class="cname">
<swiper :options="options">
<swiper-slide v-for="(item, index) in items" :key="index">
<slot :src="item"></slot>
</swiper-slide>
<div class="swiper-pagination" v-if="options.pagination" slot="pagination"></div>
</swiper>
</div>
name: "sliderComponent",
props: {
cname: {
type: String,
default: ""
},
options: {
type: Object,
default () {
return {
autoplay: {
delay: 3000,
disableOnInteraction: false,
//stopOnLastSlide: false
},
loop: true,
pagination: {
el: ".swiper-pagination"
},
observeParents:true,
observer:true
}
}
},
does not cycle, and the rotation stops when it comes to the last picture
has tried many times, and the final answer is this:
<swiper
:options="swiperOption"
ref="mySwiper"
>
<!-- slides -->
<swiper-slide
v-for="(item,index) in topBanner"
:key="item.id"
>
<img
:src="item.image_url"
:alt="index"
class="banner-img"
>
</swiper-slide>
</swiper>
data() {
return {
swiperOption: {
init:false,
loop: true,
autoplay: {
delay: 2000,
disableOnInteraction: false
},
},
}
}
of course, get $refs: when you computed ()
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
then initialize swiper during the updated () of the vue lifecycle
updated() {
console.log(this.topBanner);
if (this.topBanner.length>1) {
console.log(this.swiper);
this.swiper.init();
}
},
get a perfect solution to the this.swiper, problem without using vMuifs
you use swiper to render the swiper component
look at the official way of using it to see if your configuration is incorrect.
https://github.com/surmon-chi.
<swiper :options="swiperOption" **ref="swiperOption"** >
<swiper-slide v-for="(item, index) in items" :key="index">
<slot :src="item"></slot>
</swiper-slide>
<div class="swiper-pagination" v-if="options.pagination" slot="pagination"></div>
</swiper>
add binding ref= "swiperOption" to swiper
data
return{
swiperOption:{
autoplay: {
delay: 3000,
disableOnInteraction: false,
//stopOnLastSlide: false
},
loop: true,
pagination: {
el: '.swiper-pagination'
},
observeParents:true,
observer:true
}
}
Hello, I posted your code to run, no problem at all, just changed a little
effective solutions are found in the problem comments
