Swiper如何实现两行四列轮播图效果实例
更新时间:2022年10月8日 10:12 点击:487 作者:河北小宝
案例效果
基本样式
.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>
需要注意的是 let idx = Math.floor(index/8) if(!pages[idx]) pages[idx] =[]; pages[idx].push(item) 用来将这些图片文字 以八个为单位分别拆开 从而实现最重要的效果
循环遍历
<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="page.imgUrl"> <p>{{page.text}}</p> </div> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div>
先遍历以八个为单位的数组 然后在遍历里面的内容
总结
到此这篇关于Swiper如何实现两行四列轮播图效果的文章就介绍到这了,更多相关Swiper两行四列轮播图内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://juejin.cn/post/7150525637025857544
相关文章
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要介绍了vue中使用swiper 插件出错问题及解决办法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-08-22
- 这篇文章主要为大家详细介绍了vue+rem自定义轮播图效果,手指触摸左滑和右滑,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-29
- 这篇文章主要为大家详细介绍了JS轮播图的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-25
- 这篇文章主要为大家详细介绍了基于jquery实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
- 这篇文章主要为大家详细介绍了使用jquery实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-01-02
- 这篇文章主要介绍了原生Js 实现的简单无缝滚动轮播图的示例代码,帮助大家更好的理解喝学习使用js,感兴趣的朋友可以了解下...2021-05-11
- 这篇文章主要为大家详细介绍了原生javascript+CSS实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-18
- 这篇文章主要为大家详细介绍了基于JavaScript实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-01-02
利用BootStrap的Carousel.js实现轮播图动画效果
这篇文章主要介绍了利用BootStrap的Carousel.js实现轮播图动画效果的相关资料,需要的朋友可以参考下...2017-01-09JavaScript实现简易轮播图最全代码解析(ES6面向对象)
这篇文章主要为大家详细介绍了JavaScript实现简易轮播图最全代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-09- 这篇文章主要为大家详细介绍了JavaScript实现循环轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-11
- 这篇文章主要为大家详细介绍了js实现无缝轮播图插件封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-31
- 这篇文章主要为大家详细介绍了JS实现炫酷轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-09
- 这篇文章主要为大家详细介绍了jquery插件实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-10-19
- 这篇文章主要介绍了vue+swiper实现左右滑动的测试题功能,本文通过实例代码给大介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30
- 这篇文章主要介绍了微信小程序 swiper组件轮播图详解及实例的相关资料,需要的朋友可以参考下...2016-11-22
- 这篇文章主要为大家详细介绍了Swift实现3D轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-30
- 本文介绍了jquery实现轮播图效果示例代码。具有很好的参考价值,下面跟着小编一起来看下吧...2017-02-19
- 这篇文章主要为大家详细介绍了js制作轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-18