您的位置:首页 > Web前端 > Vue.js

vue引入Swiper,背景颜色与轮播图片一致,更改前进后退按钮以及分页器样式,

2019-08-12 21:44 1431 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/document_write/article/details/99343081

一. 安装swiper(我的swiper版本是"^4.5.0",)
npm install swiper --save
二.局部引入
import Swiper from “swiper”;
import ‘swiper/dist/css/swiper.min.css’;
三.具体代码如下

<template>
<div class="content" ref="bgColor">
<div class="box">
<div class="swiper-container  swiper-no-swiping"     @mouseover="mouseOver()" @mouseleave="mouseOut()">
<div class="swiper-wrapper">
<div v-for='(el,index) in arrItem' class="swiper-slide" :key="index">
<img class="img" :src="el.imgUrl" >
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination swiper-P1"></div>
<!-- 如果需要导航按钮 -->
<div v-show="show" >
<div class="swiper-button-prev mySwiperBtn"></div>
<div class="swiper-button-next mySwiperBtn"></div>
</div>
</div>
</div>
</div>
</template>

<script>
//局部引入swiper
import Swiper from "swiper";
import 'swiper/dist/css/swiper.min.css';
export default {
name: "HelloWorld",
data(){
return{
show:false,
arrItem:[
{
name:'swiperSlide5',
imgUrl:'https://img.piaoniu.com/misc/0a96578c4b26ee93e852d29d92fa4c1500a96ed9.png'
},
{
name:'swiperSlide1',
imgUrl:'https://img.piaoniu.com/misc/45f0ba0246de5530b99efbded68349c5b2e22134.jpg'
},
{
name:'swiperSlide51',
imgUrl:'https://img.piaoniu.com/misc/89447454b6eed4fafecb0ccc221e969a91d0c9d1.jpg'
},
{
name:'swiperSlide1111115',
imgUrl:'https://img.piaoniu.com/misc/4e8751950e48f80190e3796e2456fb5c21c548e4.jpg'
}
]

}
},
mounted(){
const Swiper2= new Swiper('.swiper-container', {
loop: true,
autoplay: true,
pagination: '.swiper-P1',
autoplay: {
delay:3000,
disableOnInteraction: false  //用户操作swiper之后,是否禁止autoplay。默认为true:停止。
},
pagination: {
el: '.swiper-pagination',
clickable:true  //此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。
},
//slide的切换效果,默认为"slide"(位移切换),可设置为'slide'(普通切换、默认),"fade"(淡入)"cube"(方块)"coverflow"(3d流)"flip"(3d翻转)。
effect : 'slide',
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
})
//背景颜色随轮播图片而改变
const bgColor=this.$refs.bgColor;
Swiper2.on('slideChangeTransitionEnd', function () {
if((Swiper2.realIndex)==0){
bgColor.style.transition="all 0.1s";
bgColor.style.backgroundColor="#F3BAC1";
}else if((Swiper2.realIndex)==1){
bgColor.style.transition="all 0.1s";
bgColor.style.backgroundColor="#A9282A";
}else if((Swiper2.realIndex)==2){
bgColor.style.transition="all 0.1s";
bgColor.style.backgroundColor="#5496A0";
}else if((Swiper2.realIndex)==3){
bgColor.style.transition="all 0.1s";
bgColor.style.backgroundColor="#E6E6E6";
}
});
},
methods:{
//前进后退按钮的显示与隐藏
mouseOver(){
this.show=true;
},
mouseOut(){
this.show=false;
}
}

}
</script>
<style scoped>
.content{
width:100%;
background-color: #F3BAC1;
height: 456px;
}
.box{
width:980px;
margin:0 auto;
padding:30px  0px;
}
.swiper-container{
width:980px;
height:400px;
display: inline-block;
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%…19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E');
background-size: 20px  20px;
left: 10px;
right: auto;
background-color: black;
opacity: 0.3;
width:50px;
height: 50px;
}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%…2L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E');
right: 10px;
background-size: 20px  20px;
left: auto;
background-color: black;
opacity: 0.3;
width:50px;
height: 50px;
}
.img{
width:980px;
height:400px;
}

</style>

//自定义分页器的样式
<style>
.swiper-pagination-bullet {
width: 18px;
height: 18px;
display: inline-block;
border-radius: 100%;
background: #fff;
}
.swiper-pagination-bullet-active{
background-color: pink;
}
</style>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐