由于webpack项目中需要使用到swiper轮播图插件 直接let swiper = require('swiper')使用是不行的。
解决方案:通过es6语法来引入:
代码如下:
// 引入轮播图插件; 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>
然后实例化:
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
这里面需要注意的是,swiper为了适应es6的语法,将很多功能进行了模块化换分,是用那些模块需要先导入,然后调用use方法,将方法绑定到类上,之后在进行实例化。直接使用不存在的模块是不会有效果的。
以上便是swiper的应用希望对你有所帮助。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。