Swiper如何实现两行四列轮播图效果实例

.icons{
width:100%;
overflow: hidden;
}
.icons-item{
width: 25%;
height: 0;
padding-bottom: 25%;
float: left;
}
.icons-item img{
width: 1.1rem;
height: 1.1rem;
display: block;
margin: 0 auto;
padding-top: .2rem;
}
.icons-item p{
margin-top: .1rem;
font-size: .28rem;
text-align: center;
color: #212121;
}

<script type="text/javascript">
export default {
data(){
return {
swiperOption:{},
iconsList:[
{
id:"01",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
text:"酒店"
},
{
id:"02",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/flight.png",
text:"机票"
},
{
id:"03",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/train.png",
text:"火车票"
},
{
id:"04",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/package.png",
text:"度假"
}
,{
id:"05",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
text:"景点门票"
}
,{
id:"06",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
text:"景点门票"
}
,{
id:"07",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
text:"景点门票"
}
,{
id:"08",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
text:"景点门票"
}
,{
id:"09",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
text:"景点门票"
}
,{
id:"10",
imgUrl:"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
text:"景点门票"
}
],
swiperOption:{
//  设置分页器
pagination: {
el: '.swiper-pagination',
}
}
}
},
computed:{
page(){
let pages = [];
this.iconsList.forEach((item,index)=>{
let idx = Math.floor(index/8)
if(!pages[idx]) pages[idx] =[];
pages[idx].push(item)
})
return pages
}
}
}
</script>

<div class="icons">
<swiper ref="mySwiper" :options="swiperOption">
<swiper-slide v-for='item in page' :key='item.id'>
<div v-for="page in item" :key="page.id"  class="icons-item">
<img :src="https://www.jb51.net/article/page.imgUrl">
<p>{{page.text}}</p>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>