1.安装插件:
npm install swiper -S
2.在main.js中引用
import Vue from 'vue';
import "swiper/swiper.min.css"
3.使用
3.1 vue2中使用swiper
官网参考地址:Swiper API
以下是Swiper 完整的 HTML 布局(分页,滚动和自动播放)
html:
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</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>
script:
<script>
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: 1000,
},
modules: [Navigation, Pagination, Scrollbar, Autoplay],
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
scrollbar: {
el: ".swiper-scrollbar",
draggable: true,
},
});
},
};
</script>
3.2 vue3中使用swiper
官网参考地址:Swiper Vue.js Components
以下是Swiper 完整的 HTML 布局(分页,导航)
html:
<swiper
:pagination="{
type: 'fraction',
}"
:navigation="true"
:modules="modules"
class="mySwiper"
>
<swiper-slide>Slide 1</swiper-slide><swiper-slide>Slide 2</swiper-slide
><swiper-slide>Slide 3</swiper-slide><swiper-slide>Slide 4</swiper-slide
><swiper-slide>Slide 5</swiper-slide><swiper-slide>Slide 6</swiper-slide
><swiper-slide>Slide 7</swiper-slide><swiper-slide>Slide 8</swiper-slide
><swiper-slide>Slide 9</swiper-slide>
</swiper>
script:
<script>
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
import "swiper/swiper-bundle.min.css"; // 所有的Swiper样式
import { Pagination, Navigation } from "swiper";
export default {
name: "App",
components: {
Swiper,
SwiperSlide,
},
setup() {
return {
modules: [Pagination, Navigation],
};
},
};
</script>