webpack项目中怎么使用swiper轮播图插件的解决方案

问题：

由于webpack项目中需要使用到swiper轮播图插件

直接let swiper = require(‘swiper’)使用是不行的

---

解决方案:

采用ES6的方式来引入

例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据
APP 中接收数据代码：

// 引入轮播图插件; Pagination, Autoplay分别是分页器组件和自动播放组件; 
// 可以根据自己的需求引入对应组件
import Swiper, { Pagination, Autoplay } from "swiper"; //引入Swiper类和对应组件
import 'swiper/swiper-bundle.css' //引入Swiper的css样式
Swiper.use([Pagination, Autoplay]) //配置上方引入的组件

接下来只需要在页面放入对应的html结构, 实例化插件就行了

 <div class="swiper">
 	<div class="swiper-wrapper">
 		<div class="swiper-slide swiper-slide1"></div>
 		<div class="swiper-slide swiper-slide2"></div>
 		<div class="swiper-slide swiper-slide3"></div>
 	</div>
 	<!-- 如果需要分页器 -->
	<div class="swiper-pagination"></div>
 </div>

 // 轮播图
    var mySwiper = new Swiper('.swiper', {
        autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            //设定false, 点击分页器后不禁止自动轮播
            disableOnInteraction: false,
        },
        loop: true,
        // 分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true //点击切换指定页
        },
    })

---