使用Flexslider进行哈希URL导航

Question

我正在建立一个使用flexslider的网站，但我想实现一些URL哈希导航。根据URL的哈希，我计划获取要显示的幻灯片的索引，最接近的方法是查看手动导航的代码，其中单击元素的索引等于幻灯片的索引：

slider.controlNav.live(eventType, function(event) {
   event.preventDefault();
   var $this = $(this),
   target = slider.controlNav.index($this);

   if (!$this.hasClass(namespace + 'active')) {
      (target > slider.currentSlide) ? slider.direction = "next" : slider.direction = "prev";
      slider.flexAnimate(target, vars.pauseOnAction);
    }
});

所以我尝试调整原则，并将其放置在Flexslider的起始属性中：

$('.flexslider').flexslider({   
     start: function(slider) {
         var target = 2; // Set to test integer

          (target > slider.currentSlide) ? slider.direction = "next" : slider.direction = "prev";
          slider.flexAnimate(target);
     }
});

根据URL中的哈希获取相应的整数不应该是个问题，但我似乎无法用测试整数得到需要的幻灯片。

有没有人在URL哈希和Flexslider方面有经验？

- Joey

Answer 1

我正在寻找相同的答案，并且弄清楚了，所以在这里提供给你或其他人需要。只要我们谈论数字值，就非常简单。

$(window).load(function(){

    //set some variables for calculating the hash

    var index = 0, hash = window.location.hash;

    //via malsup (Cycle plugin), calculates the hash value

    if (hash) {
        index = /\d+/.exec(hash)[0];
        index = (parseInt(index) || 1) - 1;
    }

    $(".flexslider").flexslider({
        startAt: index, //now foo.html#3 will load item 3
        after:function(slider){
            window.location.hash = slider.currentSlide+1;
            //now when you navigate, your location updates in the URL
        }
    })
})

那应该能解决问题。

- Andrew

---

这太棒了。如果可能的话，在您的JS中，您可以将字符串分配给数组中的这些数字，以便能够检索给定字符串的索引。感谢您的答案！ - Joey

Answer 2

当我在寻找使用URL的锚点部分（哈希）跳转到FlexSlider幻灯片的解决方案时，我遇到了这个问题。然而，安德鲁的答案对我没有起作用，可能是因为在撰写本文时，FlexSlider现在是2.6.4版本，并且需要jQuery 1.7.0+。

我的解决方案借鉴了安德鲁答案的第一部分，用于从URL中获取数字，然后使用FlexSlider 2.6.4中的内置辅助字符串来完成其余部分：

$(window).on('load', function () {

  // Get number from hash part of URL
  var index = 0, hash = window.location.hash;
  if (hash) {
    index = /\d+/.exec(hash)[0];
    index = (parseInt(index) || 1) - 1;
  }

  // Initialise a basic FlexSlider
  $('.flexslider').flexslider({
  animation: "slide"
  });

  // Pass index into helper string to jump to specific slide
  $('.flexslider').flexslider(index); 
}

希望这能帮助到任何在后续版本的FlexSlider上寻找解决方案的人 :)

- jamesMcMeex