CODEWITHSUNDEEP
jqueryhtml
Gopal
Gopal

Reputation: 861

How to slide to a specific slide on slider

I want to slide the slider to a specific slide using a url. I am able to slide to a specific slide using the slide number but I need to slide to it using its id.

eg: If I open slider.html?pic=sunset it will slide the slider to the slide with id=slide

$(window).load(function () {
    $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: true,
        itemWidth: 210,
        itemMargin: 5,
        asNavFor: '#slider'
    });

    $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: true,
        sync: "#carousel",
        start: function (slider) {
            $('body').removeClass('loading');
        }
    });
});

Upvotes: 2

Views: 6070

Answers (2)

Premshankar Tiwari
Premshankar Tiwari

Reputation: 3106

You can find the index of the slide which has the id as 'sunset'..

If your flexslider HTML structure is like ..

<div id="slider">
     <div>...<img/>...</div>
     <div>...<img/>...</div>
     <div id="sunset">...<img/>...</div>
     <div>...<img/>...</div>
</div>

Try this code.. 

var index = $('#sunset').index();   // will give you 2
$('#slider').flexslider(index);   // will take you to that slide

Upvotes: 8

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can acces the slider object like:

var exampleSlider = $('#slider').data('flexslider');
// now you can access all the methods for example flexAnimate
exampleSlider.flexAnimate(..);

And for going to slide with index. You will need:

exampleSlider.flexslider(3);//3 is index here

Upvotes: 4

Related Questions