一 首先讲下安装:
通过npm安装: npm install vue-awesome-swiper --save
二 在vue项目中找到main.js添加:
import ‘swiper/dist/css/swiper.css’ //这里注意具体看使用的版本是否需要引入样式,以及具体位置。
//(如果使用的是2.6.0以上的版本需要自己手动去加载css)
import VueAwesomeSwiper from ‘vue-awesome-swiper’
Vue.use(VueAwesomeSwiper)
然后就直接贴代码负责上去就可以使用了
<template>
<div class="scroll">
<swiper :options="swiperOption">
<swiper-slide>1</swiper-slide>
<swiper-slide>2</swiper-slide>
<swiper-slide>3</swiper-slide>
<swiper-slide>4</swiper-slide>
<swiper-slide>5</swiper-slide>
<swiper-slide>6</swiper-slide>
</swiper>
<!--以下看需要添加-->
<div class="swiper-scrollbar"></div> <!-- 滚动条 -->
<div class="swiper-button-next"></div> <!-- 下一项 -->
<div class="swiper-button-prev"></div> <!-- 上一项 -->
<div class="swiper-pagination"></div> <!-- 标页码 -->
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
name: 'HelloWorld',
data() {
return {
swiperOption:{
autoplay: {
delay: 1000, //自动切换的时间间隔,单位ms
stopOnLastSlide: false, //当切换到最后一个slide时停止自动切换
stopOnLastSlide: false, //如果设置为true,当切换到最后一个slide时停止自动切换。
disableOnInteraction: false, //用户操作swiper之后,是否禁止autoplay。
waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。
},
//左右点击
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//分页器设置
pagination: {
el: '.swiper-pagination',
clickable :true
}
}
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style> 这里不可以加上scoped 否则无效
/* 重写标页码样式 */
.swiper-pagination .swiper-pagination-bullet{
display: inline-block;
margin: 0 0.05rem;
}
/* 重写标页码选中时样式 */
.swiper-pagination-bullet-active{
background: #FFBE00;
opacity: 1;
}
</style>