swiper4实现移动端导航切换

本文实例为大家分享了swiper4实现移动端导航切换的具体代码，供大家参考，具体内容如下

首先导入

(这里用的是Swiper 4.0.7版本)

在写入html内容

 
 商品分类
 
 
 

 
手机
 
厨具
 
数码
 
家纺
 
生鲜
 
家用电器
 
食品饮料
 
电脑/办公
 
家用日用
 
 
 
 
 
 手机
 厨具
 数码
 家纺
 生鲜
 家用电器
 食品饮料
 电脑/办公
 家用日用
 

最后调用swiper

全部代码如下：

 
 
 
 
 
 
 
 *{padding:0;margin:0;font-size:20px;color:#333;}
 html{background:#fff;}
 a{text-decoration:none;}
 body{max-width:640px;margin:0 auto;position:relative;background:#ccc;overflow:hidden;}
 img{width:100%;border:0;}
 li{list-style:none;}

 .head-top{height:36px;position:fixed;top:0;left:0;text-align:center;width:100%;line-height:36px;}
 .swiper-containee{max-width:640px;}
 #nav{margin-top:36px;border-bottom:1px solid #999;padding:10px;}
 #nav li{text-align:center;}
 .active-nav{
 color:#fff;
 background:#ddd !important;
 }
 .active-nav a{
 color:#fff;
 background:#ddd !important;
 }
 #page .swiper-slide{height:6rem;}
 


 
 
 商品分类
 
 
 

 
手机
 
厨具
 
数码
 
家纺
 
生鲜
 
家用电器
 
食品饮料
 
电脑/办公
 
家用日用
 
 
 
 
 
 手机
 厨具
 数码
 家纺
 生鲜
 家用电器
 食品饮料
 电脑/办公
 家用日用
 
 
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。