在 Flexslider 中对两个不同的卡鲁塞使用相同的幻灯片

Use the same slide for two different carrousels in Flexslider

本文关键字：幻灯片 Flexslider 两个      更新时间：2023-09-26

嗨，我在柔性滑块中有一张幻灯片。 

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

}）;

我想做的是，使用相同的滑块，我想放两个旋转木马，例如，当我单击第一个旋转木马的图像时，它将显示在滑块中，但是，如果我单击第二个旋转木马的图像，它也会显示在同一个滑块中。

我该怎么做？

谢谢=）

如果我

正确理解了您的问题，我建议的一种简单方法是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 标记来执行此操作，但上述方法适用于当前状态下的代码。

相关文章：