CODEWITHSUNDEEP
jquerycsswordpressjcarousel
Adrian
Adrian

Reputation: 2012

Using two jcarousels and having one influence the other

I set up the sorgalla jcarousel plugin, what I am attempting to do is have two instances of the carousel where one infuences the other. One will have a block/vertical style and the other will have a horizontal style.

Unfortunately Im only beginning to learn Javascript and Jquery, so Im not too sure how to procede from here, any helping advice as to where I could at least have a look would be great.

Here is the function being called twice...

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
  start: 2, // Configuration goes here
    wrap: "circular",
    auto: 1,
    scroll: 1,

});
});

jQuery(document).ready(function() {
jQuery('#second-carousel').jcarousel({
    start: 2, // Configuration goes here
    wrap: "circular",
    auto: 1,
    scroll: 1,

});
});
</script>

Here is where I actually insert the jcarousels...

<ul id="mycarousel" class="jcarousel-skin-tango">
    <li>test</li>
    <li>test1</li>
    <li>test2</li>

    </li>
</ul>

<ul id="second-carousel" class="jcarousel-skin-tango">
    <li>test</li>
    <li>test1</li>
    <li>test2</li>

    </li>
</ul>

Is there a way I can sync the two up, so when I press the direction nav for the top one it also controls the second one? Here is the site where they are being tested... http://gonuts.ie/?page_id=99

Ultimately my aim is to achieve what http://www.skysports.com have at the top of their page, perhaps there is a much easier way of going about it Im not sure. Thanks again.

Upvotes: 0

Views: 741

Answers (1)

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

Here's a way to link two jCarousels to be like the Skysports site (noting Rick Calder's comment that the Skysports example is a single carousel).

var carousel_2;
$('#mycarousel').jcarousel({
    start: 1,
    wrap: "circular",
    scroll: 1,
    itemFirstInCallback: {
        onBeforeAnimation: function(carousel, item, index, action) {
            if (carousel_2) {
                carousel_2[action]();
            }
        }
    }
});
$('#second-carousel').jcarousel({
    start: 2,
    wrap: "circular",
    scroll: 1,
    vertical: true,
    buttonNextHTML: null,
    buttonPrevHTML: null,
    initCallback: function(c) {
        carousel_2 = c;
    }
});

DEMO

Testing in Opera, and with reference to Sparky672's comment, I didn't get any problems with wrap:"circular".

Upvotes: 2

Related Questions