vue可滚动的轮播
程序员文章站
2022-04-06 08:20:41
...
<template>
<md-card>
<md-card-actions>
<div class="md-subhead">
<span>Autoplay</span>
<span>(</span>
<span>自动切换</span>
<span>)</span>
</div>
<md-button class="md-icon-button"
target="_blank"
href="https://github.com/surmon-china/vue-awesome-swiper/blob/master/examples/28-autoplay.vue">
<md-icon>code</md-icon>
</md-button>
</md-card-actions>
<md-card-media>
<!-- swiper -->
<swiper :options="swiperOption">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<swiper-slide>Slide 6</swiper-slide>
<swiper-slide>Slide 7</swiper-slide>
<swiper-slide>Slide 8</swiper-slide>
<swiper-slide>Slide 9</swiper-slide>
<swiper-slide>Slide 10</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</md-card-media>
</md-card>
</template>
<script>
export default {
data() {
return {
swiperOption: {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false
},
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
}
}
}
</script>