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;
}

所需文件

需要注意的是 let idx = Math.floor(index/8) if(!pages[idx]) pages[idx] =[]; pages[idx].push(item) 用来将这些图片文字 以八个为单位分别拆开 从而实现最重要的效果

循环遍历

    
          
            

              
              
{{page.text}}
            
          
        

    
  

先遍历以八个为单位的数组 然后在遍历里面的内容

总结

到此这篇关于Swiper如何实现两行四列轮播图效果的文章就介绍到这了,更多相关Swiper两行四列轮播图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！