vue可滚动的轮播

你的名字 2023-06-23 10:59 3阅读 0赞

<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 :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>