Hash URL navigation with a Flexslider

依然范特西╮ 提交于 2019-12-01 06:58:49

问题


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?


回答1:


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




回答2:


I came across this question when looking for a solution to jump to a slide in FlexSlider using the anchor part (hash) of a URL. However, Andrew's answer did not work for me, possibly because at the time of writing this, FlexSlider is now version 2.6.4 and requires jQuery version 1.7.0+.

My solution borrows the first part of Andrew's answer, for getting the number out of the URL, and then uses a built-in helper string from FlexSlider 2.6.4 for the rest:

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

Hope this helps anyone looking for a solution on later versions of FlexSlider :)



来源:https://stackoverflow.com/questions/11384472/hash-url-navigation-with-a-flexslider

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!