vue2,vue3使用wiper、npm swiper

npm i swiper@4.4.1

main.js引入swiper样式

import 'swiper/dist/css/swiper.css';

哪里需要使用就在那里引用swiper包
这里注意创建swiper时一定要在元素创建成功的时候new sweiper
比如created生命周期内创建swiper实例不生效
mouted内创建swiper可以 推荐

//html
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
</div>


//js
import Swiper from 'swiper';
在mouted生命周期创建swiper实例
const s = new Swiper('.swiper-container', {
            loop: false,
            autoplay: 2000,
            paginationClickable: true,
            pagination: {
                el: '.swiper-pagination'
            }
        });
//销毁swiper,主要用于更改swiper内部数据没有重新渲染，销毁重新创建。
  s..destroy();

swiper更多请看官方文档