Jquery Basic Slider / Jcarousel combined

Jquery Basic Slider / Jcarousel combined

Hi all

I will try to keep this brief.

I am using Jcarousel to display a small panel of image thumbnails. Here is the HTML for them:

  1. <ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
        <li id="showimage-scroll_257.jpg"><img src="/products/scroll_257.jpg" /></li>
        <li id="showimage-scroll_259.jpg"><img src="/products/scroll_259.jpg" /></li>
        <li id="showimage-scroll_258.jpg"><img src="/products/scroll_258.jpg" /></li>
        <li id="showimage-scroll_260.jpg"><img src="/products/scroll_260.jpg" /></li>
    </ul>





I am using Jquery Basic Slider to display the large versions of the product thumbnails and animate them. Here is that code:

  1. <ul class="bjqs">
        <li><img class="large_256.jpg" src="/products/large_256.jpg" /></li>
        <li><img class="standard_257.jpg" src="/products/standard_257.jpg" /></li>
        <li><img class="standard_259.jpg" src="/products/standard_259.jpg" /></li>
        <li><img class="standard_258.jpg" src="/products/standard_258.jpg" /></li>
        <li><img class="standard_260.jpg" src="/products/standard_260.jpg" /></li>
    </ul>







Now you may notice the slider actually has 1 more image than the thumbnail carousel, this is because some of the images in it are not meant to be shown in the thumbnail list.

The thing I want to achieve is to be able to click a thumbnail and tell the slider to jump to that particluar slide.

The current native code to the slider works on a position based value.  In my case, there are 5 positions in the slider however my first thumbnail refers to position 2 in the slider, not position 1.

Any idea how I can get the thumbnail click events to trigger the correct image in the slider?

Thanks for reading.

P.S.  My slideshow may have many more images that do not have an associated thumbnail, the above is just an example.























    • Topic Participants

    • kris