vue2 中如何使用swiper

1. npm i swiper  //安裝swiper

2.main.js

 // 導入swiper樣式

import "swiper/css/swiper.css"

 

3.組件中

　　

<template>

  <div class="swiper" style='overflow: hidden;text-align:center'>

    <div class="swiper-wrapper">

        <div class="swiper-slide"><img src="/images/banner1.jpeg" alt="image"></div>

        <div class="swiper-slide"><img src="/images/banner2.jpeg" alt="image"></div>

        <div class="swiper-slide"><img src="/images/banner3.jpeg" alt="image"></div>

        <div class="swiper-slide"><img src="/images/banner4.jpeg" alt="image"></div>  

    </div>

    <!-- 如果需要分頁器 -->

    <div class="swiper-pagination"></div>

   

    <!-- 如果需要導航按鈕 -->

    <div class="swiper-button-prev"></div>

    <div class="swiper-button-next"></div>

</div>

</template>

<script>

//導入Swiper

import Swiper from 'swiper'

export default {

    name:'swiper',

    mounted(){

    new Swiper ('.swiper', {

    // direction: 'vertical', // 垂直切換選項

    loop: true, // 循環模式選項

    autoplay:true,

   

    // 如果需要分頁器

    pagination: {

      el: '.swiper-pagination',

      clickable :true,

    },

   

    // 如果需要前進后退按鈕

    navigation: {

      nextEl: '.swiper-button-next',

      prevEl: '.swiper-button-prev',

    },

   

  })

    }

}

</script>