swiper7-23. 开启自动轮播图 

  1 <template>
  2   <div class="swiper mySwiper">
  3     <div class="swiper-wrapper">
  4       <div class="swiper-slide">Slide 1</div>
  5       <div class="swiper-slide">Slide 2</div>
  6       <div class="swiper-slide">Slide 3</div>
  7       <div class="swiper-slide">Slide 4</div>
  8       <div class="swiper-slide">Slide 5</div>
  9       <div class="swiper-slide">Slide 6</div>
 10       <div class="swiper-slide">Slide 7</div>
 11       <div class="swiper-slide">Slide 8</div>
 12       <div class="swiper-slide">Slide 9</div>
 13     </div>
 14     <div class="swiper-button-next"></div>
 15     <div class="swiper-button-prev"></div>
 16     <div class="swiper-pagination"></div>
 17     <!-- 自动轮播图 -->
 18   </div>
 19 </template>
 20 <script>
 21 import Swiper from "swiper/swiper-bundle.min.js";
 22 import "swiper/swiper-bundle.min.css";
 23 
 24 export default {
 25   components: {},
 26   methods: {},
 27   mounted() {
 28     this.$nextTick(() => {
 29       // 创建swiper对象
 30       var swiper = new Swiper(".mySwiper", {
 31         spaceBetween: 30,
 32         // 设定为true时，active slide会居中，而不是默认状态下的居左。
 33         centeredSlides: true,
 34         // autoplay 设置为true启动自动切换，并使用默认的切换设置。
 35         autoplay: {
 36           delay: 2500,
 37           // 用户操作swiper "之后"，是否禁止autoplay。默认为true：停止。
 38           // 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
 39           // 操作包括触碰(touch)，拖动，点击pagination等。
 40           disableOnInteraction: false,
 41         },
 42         pagination: {
 43           el: ".swiper-pagination",
 44           clickable: true,
 45         },
 46         navigation: {
 47           nextEl: ".swiper-button-next",
 48           prevEl: ".swiper-button-prev",
 49         },
 50       });
 51     });
 52   },
 53 };
 54 </script>
 55 
 56 <style>
 57 html,
 58 body {
 59   position: relative;
 60   height: 100%;
 61 }
 62 
 63 body {
 64   background: #eee;
 65   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 66   font-size: 14px;
 67   color: #000;
 68   margin: 0;
 69   padding: 0;
 70 }
 71 .swiper {
 72   width: 100%;
 73   height: 500px;
 74 }
 75 
 76 .swiper-slide {
 77   text-align: center;
 78   font-size: 18px;
 79   background: #fff;
 80 
 81   /* Center slide text vertically */
 82   display: -webkit-box;
 83   display: -ms-flexbox;
 84   display: -webkit-flex;
 85   display: flex;
 86   -webkit-box-pack: center;
 87   -ms-flex-pack: center;
 88   -webkit-justify-content: center;
 89   justify-content: center;
 90   -webkit-box-align: center;
 91   -ms-flex-align: center;
 92   -webkit-align-items: center;
 93   align-items: center;
 94 }
 95 
 96 .swiper-slide img {
 97   display: block;
 98   width: 100%;
 99   height: 100%;
100   object-fit: cover;
101 }
102 </style>

 

posted @ 2021-12-12 18:04  sky-su  阅读(867)  评论(0)    收藏  举报