Hash URL navigation with a Flexslider

Question

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 sl

Answer 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

Answer 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 :)