问题
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