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>