Getting Creative about bxslider-3

[stevenwanderski]

Since the plugin is flexible, there many ways to achieve this. Here is one way:

HTML:

<ul id="main-slider">
    <li>slide 1</li>
    <li>slide 2</li>
    <li>slide 3</li>
    <li>slide 4</li>
</ul>

<ul id="thumb-slider">
    <li><a href="" index="0"><img src="image1.jpg" /></a></li>
    <li><a href="" index="1"><img src="image2.jpg" /></a></li>
    <li><a href="" index="2"><img src="image3.jpg" /></a></li>
    <li><a href="" index="3"><img src="image4.jpg" /></a></li>
</ul>

jQuery:

$(function(){
    
    var main_slider = $('#main-slider').bxSlider({
        controls: false
    });

    var thumbs_slider = $('#thumb-slider').bxSlider({
        displaySlideQty: 3,
        moveSlideQty: 3
    });
    
    $('#thumb-slider a').click(function(event) {
        var index = $(this).attr('index');
        main_slider.goToSlide(index);
        return false;
    });
    
});

As I said, there are many different ways to do this - let me know how it works out for you!

[markpopkes]

That worked pretty good! Thank you for the help! There is one issue, however — If you set the main slider to "auto slide", there needs to be a way to connect the current slide with the associated thumbnail image. I was trying to utilize the public functions, but there is not much documentation on how to implement that.

Again, I'm new to javascript development so any ideas would be helpful!

[markpopkes]

Oops. Didn't mean to "close" this.

[neojohan]

Hello any fix for this. I also experience this problem once I click the thumb the current slide doesn't change but refreshes the current page

[WernerLouw]

Hi there. If I use the sample above, the thumbnail goes full width. Is there a fix for this? Thanks!