swiper4 移动端导航切换（可滑动）

最新推荐文章于 2024-12-28 13:11:05 发布

葉幺

最新推荐文章于 2024-12-28 13:11:05 发布

阅读量1.2w

点赞数 4

分类专栏：前端移动端文章标签： swiper 移动端滑动导航切换

本文链接：https://blog.youkuaiyun.com/weixin_42861240/article/details/81874275

版权

本文介绍了如何利用Swiper4库在移动端创建滑动导航切换的效果。通过导入Swiper，编写HTML结构，并进行初始化配置，可以实现平滑的页面导航切换功能。适合前端开发新手学习实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述
首先导入

<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/swiper.min.js"></script>(这里用的是Swiper 4.0.7版本)

在写入html内容

<div id=header>
    <div class="head-top">
        <h3>商品分类</h3>
    </div>
    <div id="nav" class="swiper-container">
        <ul class="swiper-wrapper">
            <li class="swiper-slide active-nav"><a href="javascript:;">手机</a></li>
            <li class="swiper-slide"><a href="javascript:;">厨具</a></li>
            <li class="swiper-slide"><a href="javascript:;">数码</a></li>
            <li class="swiper-slide"><a href="javascript:;">家纺</a></li>
            <li class="swiper-slide"><a href="javascript:;">生鲜</a></li>
            <li class="swiper-slide"><a href="javascript:;">家用电器</a></li>
            <li class="swiper-slide"><a href="javascript:;">食品饮料</a></li>
            <li class="swiper-slide"><a href="javascript:;">电脑/办公</a></li>
            <li class="swiper-slide"><a href="