使用Flexslider进行哈希URL导航

我正在构建一个使用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的start属性中：

 $('.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 hash和Flexslider有任何经验？

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 } }) }) 

这应该够了吧

Answer 2

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

我的解决方案借用了Andrew的答案的第一部分，用于从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上寻找解决方案:)