Vue-cli使用Swiper
文章描述：
Vue-cli项目中使用Swiper来实现幻灯片轮播效果
安装
cnpm install swiper vue-awesome-swiper --save<template>
<div>
<div class="banner">
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class=""></div>
</div>
<div class="swiper-slide">
<div class=""></div>
</div>
<div class="swiper-slide">
<div class=""></div>
</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>
</div>
</template>import "swiper/swiper-bundle.min.css"; // 所有 Swiper 样式，包括所有模块样式（如导航、分页等）
import Swiper, { Navigation, Pagination, Scrollbar, Autoplay } from "swiper"; // 导入您需要的模块
export default {
mounted() {
new Swiper(".swiper", {
speed: 400,
spaceBetween: 100,
autoplay: {
delay: 2000,
},
modules: [Navigation, Pagination, Scrollbar, Autoplay],
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
scrollbar: {
el: ".swiper-scrollbar",
draggable: true,
},
});
},
}
发布时间：2022/12/06
发表评论