Getting Creative

[markpopkes]

First off... your slider is awesome. Words cannot express how amazing this plugin is for jQuery.

Second... I was trying to get creative with your slider and attempted to create something like SlideViewer Pro -- http://www.gcmingati.net/wordpress/wp-content/lab/jquery/svwt/ where you would have a bxSlider controlled by a row of thumbnails (Thumbnails As Pager), and also show only 3 or 4 of the thumbnails and use the "Display / move multiple slides at once - example two" example.

My jquery skills are limited at best. Any help would be awesome.

JAVASCRIPT $(function(){

        var slider = $('#slides2').bxSlider({ controls: false, pager: false});

        $('#slide-thumbs a').click(function() {
            var thumbIndex = $('#slide-thumbs a').index(this);
            slider.goToSlide(thumbIndex);
            return false;   
        });


        /*$("#slide-thumbs").bxSlider({
            pager: false,
            displaySlideQty: 3,
            moveSlideQty: 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!