Question

编辑我修复了之前的斜线问题并更新了我的问题。

我试图在Angular.js网站上实现Swiper的哈希导航功能。 Here's the example they provide.

但是，一旦我添加了代码，就会出现一些问题。

导航到新链接并不起作用。它只是将用户带到没有哈希的页面。例如，用户被带到www.example.com/gallery而不是www.example.com/gallery/#summer
导航到www.example.com/gallery/会导致www.example.com/gallery/#summer位于网址栏中，但显示的网页为www.example.com/gallery/。

我的代码

swiper在scripts.js中初始化，如下所示：

//initialize swiper
var appendNumber = 0;
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationType: 'fraction',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 30,
    initialSlide: 1,
    //hash navigation attributes
    hashnav: true,
    hashnavWatchState: true,

});

加载所有php之后，swiper元素就像这样：

<div class="swiper-wrapper" style="transition-duration: 0ms;">
    <div class="swiper-slide swiper-slide-active" data-hash="the-producers-club">
        <img class="swiper_img" src="images/producersclub.jpg">
    </div>
    <div class="swiper-slide swiper-slide-next" data-hash="hummingbird-studios">
        <img class="swiper_img" src="images/CHI.png">
    </div>
    <div class="swiper-slide" data-hash="anthology-film-archives">
        <img class="swiper_img" src="images/large.jpg">
    </div>
    ....

此外，当加载php页面时，在swiper上调用此脚本：

<script>
    swiper.update();
    //clear any pre-loaded slides
    swiper.removeAllSlides();

    //store images in swiper
    $(".modal_img").each(function(i,x) {
        //find venue name
        var closest_venue = ($(this).closest('.img_div').find('.screenings_p').text());
        //prepare string for hash navigation
        closest_venue = closest_venue.replace(/\s+/g, '-').toLowerCase();
    //add hash to URL
    swiper.appendSlide('<div class="swiper-slide" data-hash="' + closest_venue + '"><img class="swiper_img" src="' + $(this).attr("src") + '"/></div>');
})
....

我不确定我到底出了什么问题。在页面加载时，swiper.update();和swiper.removeAllSlides();可能会导致问题吗？

我已将此转发给Swiper论坛here。

Answer 1

我不知道这是否能解决您的整个问题，但//哈希导航属性应该是：

  hashNavigation: {
    watchState: true,
  },

Swiper Hash Navigation无法正常工作

1 个答案: