在 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
});

});

我想做的是，使用同一个滑块，我想放两个轮播，例如，当我点击第一个轮播的图片时，它会显示在滑块中，但是，如果我点击第二个轮播的图片，它也显示在同一个滑块中。

我该怎么做？

谢谢=)

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 标记来执行此操作，但上述方法适用于当前状态下的代码。

在 Flexslider 中对两个不同的轮播使用相同的幻灯片

Use the same slide for two different carrousels in Flexslider

javascript

jquery

flexslider