< template >
< div class= "scroll" >
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide v-for="(item,index) in slidePic" :key="index"><img :src="item.src" alt=""> </swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination " slot="pagination"></div>
<div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
<div class="swiper-button-next swiper-button-black" slot="button-next"></div>
</swiper> < / div >
< / template >
< script >
import {swiper, swiperSlide} from "vue-awesome-swiper"
export default {
name:" HelloWorld",
components: {
swiper,
swiperSlide },
data () {
return {
slidePic :[
{src:"https://img.codeshelper.com/upload/img/2021/03/23/avflgme1jes12957/assets/banner/timg1.jpg"},
{src:"https://img.codeshelper.com/upload/img/2021/03/23/avflgme1jes12957/assets/banner/timg2.jpg"},
{src:"https://img.codeshelper.com/upload/img/2021/03/23/avflgme1jes12957/assets/banner/timg3.jpg"},
{src:"https://img.codeshelper.com/upload/img/2021/03/23/avflgme1jes12957/assets/banner/timg4.jpg"},
],
swiperOption: {
notNextTick: true,
//
loop:true,
//slide
initialSlide:0,
//
// autoplay:true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
//
effect : "flip",
//
speed:800,
//
direction : "horizontal",
//
// grabCursor : true,
//
on: {
slideChangeTransitionEnd: function(){
// console.log(this.activeIndex);//slide
},
},
//
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
//
pagination: {
el: ".swiper-pagination",
clickable :true
}
}
}},
/ / props: ["slidePic"],
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
} },
mounted () {
}
}
< / script >
< style scoped >
H1, H2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 010px;
}
a {
color:-sharp42b983;
}
.swiper-slide {
height:200px;
}
< / style >
the picture cannot be displayed. I don"t know if it is transmitted incorrectly
because the dynamic introduction of
< swiper-slide > 