博客

本次内容我们介绍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.