bootstrapvue中使⽤swiper图⽚轮播
boottstrapvue中要⽤图⽚轮播
前⾔
尝试过js的⾛马灯和⽆缝滚动，这两个只适应电脑端，尝试着修改bootstrapvue中⾃带的图⽚轮播，但是出来的是三张三张的⼀起轮播，这个要证都是三的倍数
⼀、vue中引⼊swiper？
在终端执⾏：
npm install --save swiper
npm install --save vue-awesome-swiper
⼆、使⽤步骤
1.引⼊库
在main.js中全局引⼊
代码如下（⽰例）：
//swiper版本6.0以上使⽤，我使⽤的是swiper6.5.7
import 'swiper/swiper-bundle.css'
import VueAwesomeSwiper from 'vue-awesome-swiper';
//swiper版本6.0以下使⽤
// import "swiper/dist/css/swiper.css";
Vue.use(VueAwesomeSwiper)
2.在页⾯中引⼊
代码如下（⽰例）：
<script>
import Swiper,{ Pagination, Navigation, Autoplay } from 'swiper'
Swiper.use([Pagination, Navigation, Autoplay])
</script>
2.总体代码
//图⽚的路径⾃⼰改⼀下
<b-container>
<b-row>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<b-card :img-src="imgp2" img-alt="Image" img-top>
<b-card-text>创新</b-card-text>
</b-card>
</div>
<div class="swiper-slide">
<b-card-group>
<b-card :img-src="imgp3" img-alt="Image" img-top>
<b-card-text>测试，奇偶</b-card-text>
</b-card>
</div>
<div class="swiper-slide">
<b-card :img-src="imgp4" img-alt="Image" img-top>
<b-card-text>测试，即可</b-card-text>
</b-card>
</div>
</div>
</div>
<!--如果需要分页器-->
<!--<div class="swiper-pagination"></div>-->
<!--如果需要导航按钮-->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!--如果需要滚动条-->
<!--<div class="swiper-scrollbar"></div>-->
</div>
</b-row>
</b-container>
//在mounted中
mounted (){
var mySwiper = new Swiper ('.swiper-container',{      loop : true,
slidesPerView:3,
autoplay:true,
//修改swiper的⽗元素时，⾃动初始化swiper
observer:true,
//修改swiper⾃⼰或⼦元素时，⾃动初始化swiper      observeParents:true,
navigation:{
nextEl:'.swiper-button-next',
prevEl:'.swiper-button-prev',
},
})
//⿏标移⼊停⽌轮播
useover =function(){
mySwiper.autoplay.stop();
}
//⿏标移出开始轮播
useout =function(){
mySwiper.autoplay.start();
}
//修改左右箭头⼤⼩和背景⾊
<style>
.swiper-button-prev,.swiper-button-next{
color: #fff;
background: #5e5f5e;
js简易轮播图代码}
.swiper-button-prev:hover{
background: blue;
}
.
swiper-button-next:hover{
background: blue;
}
.swiper-button-prev:after,.swiper-button-next:after {    font-size:14px;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。