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

2023-11-19

问题:

由于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 //点击切换指定页
        },
    })

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐