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>
相关文章推荐
- MFC工程更改按钮背景颜色,编辑框背景颜色,给按钮加载图片
- ios 改变导航返回按钮的字体样式以及背景图片
- android:更改PagerTabStrip背景颜色,标题字体样式、颜色和图标,以及指示条的颜色
- Flex中如何通过backgroundImage, backgroundColor和backgroundAlpha样式,设置VBox的背景图片和背景颜色以及改变透明度
- ios 更改全局UINavigationBar的背景图片以及通知栏颜色
- 修改ActionBar的样式(overflow按钮图片修改,AcitonBar背景颜色,去掉ActionBar下面的阴影)
- UGUI 如何代码更改image的背景图片、颜色以及材质
- vue一个组件引入多个swiper轮播可能引发的分页器数量异常问题
- win32 htmlayout点击按钮创建新窗口,以及按钮图片样式
- qss样式:按钮在designer中设置背景颜色的问题
- asp.net2.0自定义控件---鼠标移到按钮上更改背景颜色,移出后恢复
- Android中自定义SeekBar的背景颜色,进度条颜色,以及滑块的图片
- Android中自定义SeekBar的背景颜色,进度条颜色,以及滑块的图片
- Android中自定义SeekBar的背景颜色,进度条颜色,以及滑块的图片
- html设置按钮背景颜色与背景图片一样,即设置按钮背景透明
- vue打包项目,webpack配置改变以及图片正确引入姿势
- input[type=file]样式更改以及图片上传预览
- navigationItem.rightBarButtonItem 设置背景图片,颜色更改解决办法
- VS2010,MFC动态按钮和窗体背景图片,以及是静态文字控件透明,并避免静态文字刷新出现的重叠问题
- IOS 如何更改导航栏样式及状态栏字体颜色(导航栏背景、前景、标题及返回字体颜色)