Используйте тот же слайд для двух различных каруселей в Flexslider

Question

Привет, У меня есть слайд в 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> 

То есть синхронизация с каруселью:

<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> 

А вот мой 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 
}); 

});

что я хочу сделать, это, используя тот же ПОЛЗУНОК, я хочу поставить два каруселей, и, например, при нажатии на A изображения первого карусельный, будет показано на ползунке, но, если бы я ЩЕЛКНИТЕ ИЗ ИЗОБРАЖЕНИЯ ВТОРОЙ КРУГОВОЙ, ТАКЖЕ ТАКЖЕ ПОКАЗЫВАЕТСЯ В ОДНОМ СЛАЙДЕРЕ.

Как я могу это сделать?

спасибо =)

Answer 1

Если я правильно понял ваш вопрос, один простой способ, который я хотел бы предложить, чтобы show одна карусель и hide другой:

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


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

Есть другие способы, чтобы сделать это с меньшей разметкой HTML, но вышеупомянутый подход работает с вашим кодом в его текущем состоянии.