从 NPM 安装
我们可以从 NPM 安装 Swiper
npm install swiper
导入包含所有模块(捆绑包)的 Swiper
// import Swiper bundle with all modules installed
import Swiper from 'swiper/bundle';
// import styles bundle
import 'swiper/css/bundle';
初始化Swiper
import { onMounted } from 'vue'
onMounted(() => {
var swiper = new Swiper(".mySwiper", {
slidesPerView: 4,
centeredSlides: true,
spaceBetween: 30,
grabCursor: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
})
html
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-pagination"></div>
</div>
css
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
Getting Started With Swiper (swiperjs.com)
onMounted
会在组件实例被成功挂载到DOM上后调用。这意味着,当组件的模板被渲染并添加到DOM中之后,onMounted
中的代码将被执行。在这个阶段,可以安全地访问和操作DOM元素,执行数据请求等副作用操作。