Use the same slide for two different carrousels in Flexslider

Question

Hi, I have a slide in flexslider.

                                <div id="slider" class="flexslider">
                                <ul class="slides">
                                    <li>
                                        <img class="center-block polaroidSlides" src="image.jpg" alt="descubre1" />
                                    </li>
                                    <li>
                                        <img class="center-block polaroidSlides" src="image.jpg" />
                                    </li>
                                    <li>
                                        <img class="center-block polaroidSlides" src="image.jpg" alt="descubre3" />
                                    </li>
                                    <li>
                                        <img class="center-block polaroidSlides" src="image.jpg" alt="descubre4" />
                                    </li>
                                    <li>
                                        <img class="center-block polaroidSlides"  src="image.jpg" alt="descubre5" />
                                    </li>
                                    <li>
                                        <img class="center-block polaroidSlides"  src="image.jpg" alt="descubre6"/>
                                    </li>
                                </ul>
                            </div>

That is sync with a carrousel:

<div id="carousel" class="flexslider mb0">
                                <ul class="slides" >
                                    <li>
                                        <img class="polaroidCarrousel" src="image.jpg" />
                                    </li>
                                    <li>
                                        <img class="polaroidCarrousel" src="image.jpg" />
                                    </li>
                                    <li>
                                        <img class="polaroidCarrousel" src="image.jpg" />
                                    </li>
                                    <li>
                                        <img class="polaroidCarrousel" src="image.jpg" />
                                    </li>
                                    <li>
                                        <img class="polaroidCarrousel" src="image.jpg" />
                                    </li>
                                    <li>
                                        <img class="polaroidCarrousel" src="image.jpg" />
                                    </li>
                                </ul>
                            </div>

And here is my Javascript:

$(window).load(function () {
// The slider being synced must be initialized first
$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: true,
    slideshow: false,
    itemWidth: 150,
    itemMargin: 5,
    asNavFor: '#slider'

});


$('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: true,
    slideshow: true,
    sync: "#carousel",
    slideshowSpeed: 1500
});

});

WHAT I WANNA DO, IS , USING THE SAME SLIDER, I WANNA PUT TWO CARROUSELS, AND FOR EXAMPLE, WHEN I CLICK ON A IMAGE OF THE FIRST CARROUSEL, IT WILL BE SHOWN IN THE SLIDER, BUT ALSO, IF I CLICK ON A IMAGE OF THE SECOND CARROUSEL IT ALSO IS SHOW IN THE SAME SLIDER.

How can i do that?

thanks =)

Answer 1

If I understood your question correctly, one easy way that I would suggest is to show one carousel and hide the other one:

$("whatever clicked button to show #carousel").click(function() {
    $("#carousel").show();
    $("#slider").hide();
});


$("whatever clicked button to show #slider").click(function() {
    $("#carousel").hide();
    $("#slider").show();
});

There are other ways to do this with less HTML markup but the above approach works with your code in its current state.