vue-awesome-swiper 小案例

最終效果：

安裝引入：

npm install vue-awesome-swiper --save

在main.js中引入：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'複製程式碼

Swiperdetails.vue元件中所有內容：

<template>
  <div class="Product-details" >
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item,index) in arrs2" :key="index">
        <img :src="item"/>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        name: "Swiperdetails",
      data() {
        return {
          swiperOption: {
            autoplay: {
              autoplay: 1500,
              disableOnInteraction: false,//放置觸控後自動輪播停止
            },
            pagination: {
              el: '.swiper-pagination',
              type: 'fraction'
            },
            loop:true,
          },
          arrs2:[
            require("../assets/img/details1.jpg"),
            require("../assets/img/details2.jpg"),
            require("../assets/img/details3.jpg"),
            require("../assets/img/details4.jpg"),
            require("../assets/img/details5.jpg"),
          ],
        }
      },
    }
</script>

<style scoped>
  .Product-details{
    width:100%;
    height: 5.66rem;
  }
  .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
    font-size: .12rem;
    left:80%;
    bottom: 10%;
    width: .65rem;
    height: .31rem;
    background: #7f7f7f;
    filter:Alpha(opacity=70);
    color: white;
    line-height: .31rem;
    border-radius: 25px;
  }
  .swiper-slide img{
    width: 100%;
    height: 5.66rem;
  }
</style>
複製程式碼