如何在Vue 2.0里使用Swiper
Swiper 官方文档 https://www.swiper.com.cn/
在低版本中使用swiper
npm install swiper vue-awesome-swiper --save
html
<template>
<div class="hello">
<div class="swiper-container">
<div class="swiper-wrapper">
<div
class="swiper-slide"
v-for="(item, index) in swiperList"
:key="index"
>
{{ item }}
</div>
</div>
//前进后退的按钮 如果需要可以在API文档中查找,然后修改
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</template>
js
<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
export default {
data() {
return {
swiperList: [
{
imgs: "1",
},
{
imgs: "2",
},
{
imgs: "3",
},
{
imgs: "4",
},
{
imgs: "4",
},
{
imgs: "4",
},
{
imgs: "4",
},
{
imgs: "4",
},
],
swiperObj: "",
};
},
mounted() {
this.getData();
},
methods: {
getData() {
var mySwiper = new Swiper(".swiper-container", {
slidesPerView: 4,
spaceBetween: 30,
slidesPerGroup: 4,
loop: true,
loopFillGroupWithBlank: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
disabledClass: 'my-button-disabled',
},
preventClicks: true, //默认true
});
},
},
};
</script>
css
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #cccccc;
height: 200px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
运行展示如下
在API 文档中找自己需要的文档