准备:下载引入vue-awesome-swiper
import {swiper,swiperSlide } from 'vue-awesome-swiper'
...
components: {
swiper,
swiperSlide
},
vue-awesome-swiper 自定义索引样式
<div class="carousel_1">
<h3>正常的点索引</h3>
<swiper :options="swiperOption_1">
<swiperSlide>
<a href="javascript:;">
<img src="../../assets/images/test/img1.png" class="not_imgbg">
</a>
</swiperSlide>
<swiperSlide>
<a href="javascript:;">
<img src="../../assets/images/test/img2.jpg" class="not_imgbg">
</a>
</swiperSlide>
<swiperSlide>
<a href="javascript:;">
<img src="../../assets/images/test/img3.jpg" class="not_imgbg">
</a>
</swiperSlide>
<div class="swiper-pagination" id="pagination_1" slot="pagination"></div>
</swiper>
</div>
swiperOption_1:{
slidesPerView:1,//一次显示几个
autoplay: {
disableOnInteraction: false,//用户操作后是否停止自动
delay:2000,//轮播间隔时间
},
speed:500,//切换速度
pagination:{
el:'#pagination_1'//索引插槽元素
},
loop: true,//是否无缝循环轮播
},
}
.carousel_1{
img{
width: 100%;
}
/*修改索引的样式*/
#pagination_1 .swiper-pagination-bullet{
width: 40px;
height: 40px;
}
/*修改当前触发的索引的样式*/
#pagination_1 .swiper-pagination-bullet-active{
background-color: #f64c56;
}
}
效果:
数字类型(vue-awesome-swiper仿考拉海购轮播)
<div class="carousel_2">
<h3>数字索引</h3>
<swiper :options="swiperOption_2">
<swiperSlide>
<a href="javascript:;">
<img src="../../assets/images/test/img1.png" class="not_imgbg">
</a>
</swiperSlide>
<swiperSlide>
<a href="javascript:;">
<img src="../../assets/images/test/img2.jpg" class="not_imgbg">
</a>
</swiperSlide>
<swiperSlide>
<a href="javascript:;">
<img src="../../assets/images/test/img3.jpg" class="not_imgbg">
</a>
</swiperSlide>
<div class="swiper-pagination" id="pagination_2" slot="pagination"></div>
</swiper>
</div>
swiperOption_2:{
slidesPerView:1,//一次显示几个
autoplay: {
disableOnInteraction: false,//用户操作后是否停止自动
delay:2000,//轮播间隔时间
},
speed:500,//切换速度
pagination:{
el:'#pagination_2',//索引插槽元素
type: 'fraction'//数字分页
},
loop: true,//是否无缝循环轮播
},
.carousel_2{
img{
width: 100%;
}
/*修改索引的样式*/
#pagination_2{
right: 40px;
left:inherit;
padding: 0 30px;
width:auto;
font-size:0.28rem;
background: url("./indexBg.png");
background-size:98px;
background-repeat: no-repeat;
background-position: center;
color: #fff;
span{
font-size: 26px;
color: #fff;
display: inline-block;
width:30px;
height:60px;
line-height:60px;
}
}
}
效果:
vue-awesome-swiper 自定义索引内容
<div class="carousel_3">
<h3>自定义内容索引</h3>
<swiper :options="swiperOption_3">
<swiperSlide>
<a href="javascript:;">
<img src="../../assets/images/test/img1.png" class="not_imgbg">
</a>
</swiperSlide>
<swiperSlide>
<a href="javascript:;">
<img src="../../assets/images/test/img2.jpg" class="not_imgbg">
</a>
</swiperSlide>
<swiperSlide>
<a href="javascript:;">
<img src="../../assets/images/test/img3.jpg" class="not_imgbg">
</a>
</swiperSlide>
<div class="swiper-pagination" id="pagination_3" slot="pagination"></div>
</swiper>
</div>
imgName:["兑好礼","影视精选","点滴爱心"],
swiperOption_3:{
slidesPerView:1,//一次显示几个
autoplay: {
disableOnInteraction: false,//用户操作后是否停止自动
delay:2000,//轮播间隔时间
},
speed:500,//切换速度
pagination:{
el:'#pagination_3',//索引插槽元素
clickable: true,//是否可点击
renderBullet:(index, className)=> {
var name=this.imgName[index];
return `<div class="swiper-pagination-bullet-custom swiper-pagination-bullet radius50 Title">
<div class="item">${name}</div>
</div>`
}
},
loop: true,//是否无缝循环轮播
},
.carousel_3{
img{
width: 100%;
}
/*修改索引的样式*/
#pagination_3 .swiper-pagination-bullet{
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
width: 200px;
height: 40px;
line-height: 40px;
background-color: #f6ccbe;
}
/*修改当前触发的索引的样式*/
#pagination_3 .swiper-pagination-bullet-active{
background-color: #f64c56;
}
}
效果:
以上:(* ̄︶ ̄)
vue-awesome-swiper 实现文字导航
<div id="headerNav">
<swiper :options="swiperOption">
<swiperSlide v-for="(item,i) in headerNavArr" :key="i" v-bind:class="{'themeBorder actived':item.className==$route.query.className}">
<div class="navItem">{{item.className}}</div>
</swiperSlide>
</swiper>
</div>
headerNavArr:[
{className:"个人护理"},
{className:"日常用品"},
{className:"母婴儿童"},
{className:"厨房用品"},
{className:"家居家纺"},
{className:"精品家电"},
{className:"每日金喜"},
],
swiperOption:{
slidesPerView: 5,//一次显示
freeMode: true,//挨边
slideToClickedSlide:true,//点击居中
// preventLinksPropagation : false,//拖动不触发
},
#headerNav{
overflow: auto;
width:100%;
.navItem{
display: block;
font-size: 28px;
height: $commonH;
line-height:$commonH;
color: #666;
}
}
效果: