swipe的基础使用（二十四）

最新推荐文章于 2025-02-27 20:04:11 发布

原创最新推荐文章于 2025-02-27 20:04:11 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #web前端 #框架 #移动 #swiper

swiper介绍专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何使用Swiper实现散列导航功能。通过在页面中设置特定的链接和滑块属性，结合JavaScript初始化配置，可以在网页中实现平滑的跳转效果。

本次内容我们介绍swiper当中的散列导航。

我们按照惯例先搭建swiper的基础页面。

 <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="http://www.h5edu.cn/usercode/a54111bbe7ec5fb7ebd9accb9ca140f1ef23eadb/#slide3"
                    target='_blank'>点我跳到第三页</a>
                </div>
                <div class="swiper-slide">H5EDU 2</div>
                <div class="swiper-slide" data-hash="slide3">H5EDU 3</div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

在页面当中的第一个slide当中加入了连接，然后在第三个slide当中加入data-hash=“slide3”的属性.

正常连接当中直接写href="#slide3"其实也是可以实现的，但是这样做除了_blank的跳转方法以外，_self是不可以使用的，但是写全了是可以直接在当前页面跳转的。

所以在这里直接将地址写全。

然后在js当中进行初始化。

var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                paginationClickable:true,
                spaceBetween:30,
                hashnav:true
            });

要在初始化当中开启散列导航 hashnav:true.