使用Flexslider进行哈希URL导航 [英] Hash URL navigation with a Flexslider

问题描述

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

  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的开始属性中：

$ b $

  $（'。flexslider'）。flexslider（{
 start：function（slider）{
 var target = 2 ; //设置为测试整数
 
（target> slider.currentSlide）？slider.direction =next：slider.direction =prev; 
 slider.flexAnimate（target） ; 
} 
}）; 
  

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

有没有人有URL散列和Flexslider的经验？

解决方案

我正在寻找相同的答案，并找出答案，所以在这里如果您或其他人，需要它。

$ b

  $（window）.load（function（）{ 
 
 //设置一些用于计算散列值的变量
 
 var index = 0，hash = window.location.hash; 
 
 //通过malsup （Cycle插件），计算散列值
 
 if（hash）{
 index = /\d+/.exec(hash)[0]; 
 index =（parseInt （index）|| 1） -  1; 
} 
 
 $（。flexslider）。flexslider（{
 startAt：index，// now foo.html＃3将在下面加载项目3 
：function（slider）{
 window.location.hash = slider.currentSlide + 1; 
 //现在当你浏览时，你的位置在URL $ b中更新
 $ b}）
}）
  

/ p>

I'm building a website that makes use of a flexslider, but I want to implement some URL hash navigation. Based on the hash of the URL, i plan on getting the index of the slide that i want to display and the closest I came is by looking at the code for the manual navigation, where the index of the clicked element equals the index of the slide:

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

So I tried adjusting the principle and putting it in the start property of the 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);
     }
});

Getting the corresponding integer based on the hash in the URL shouldn't be a problem, but i cant seem to get the slide i need with a test integer.

Does anyone have any experience with URL hash's and the Flexslider?

解决方案

I was searching for the same answer, and figured it out, so here it is in case you, or someone else, needs it. As long as we're just talking number values, it's pretty simple.

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

That should do the trick

这篇关于使用Flexslider进行哈希URL导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！