CODEWITHSUNDEEP
jqueryarraysflexslider
Travis Hall
Travis Hall

Reputation: 43

how to move flexslider to last slide

I have a flexslider object that's working perfectly. However I have an anchor on the page that needs to move the carousel to the last slide. Also the slide number can vary, so targeting a specific index value won't satisfy the requirements.

I have no trouble moving to specific indexes, as such (moves to first index position):

$('.flexslider').data("flexslider").flexAnimate(0);

I imagine there's some type of keyword, or perhaps an equation but I haven't found a reliable resource. Any thoughts?

Upvotes: 3

Views: 5439

Answers (2)

Frank Robert Anderson
Frank Robert Anderson

Reputation: 266

If you bypass the .flexslider helper function, then you can override the internal checker.

$('.flexslider').data("flexslider").flexAnimate(index, true, true);

The third parameter is the override parameter. It basically forces flexslider to animate to that slide even it doesn't pass the internal check of the canAdvance check.

This is necessary if you want to fade the animation instead of sliding. K K's work around doesn't work with the fade animation.

Upvotes: 2

K K
K K

Reputation: 18099

I think you were close to the answer. You can get the index of any concerned element in a collection/selector by .index() function.

Now, let's say you have ul of class .slides containing several li.

For getting the index of last li:

var index = $('.slides li').index($('.slides li:last'));

now since you've got the index of the desired slide, you can pass this index into flexslider to activate or show that slide:

$('.flexslider').data("flexslider").flexAnimate(index);

You can see that by default the slider begins from the last slide. Hope this helps

Further, you can use this into a click handler

Update: There was an issue with slide which doesn't allow manual sliding unless the next or prev links are clicked for the slider. The possible fix which I found is:

var lastSlide = $('.slides li').index($('.slides li:last'));
$("a.specs").click(function () {    
    flex.flexslider('next'); // This is the trick. 
    flex.flexslider(lastSlide)
});

Demo: http://jsfiddle.net/lotusgodkk/n9JUc/21/

Upvotes: 3

Related Questions