Question

嗨，我有一个幻灯片幻灯片。

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

}）;

我在做什么，是，使用相同的滑块，我想把两个卡车用，而且例如，当我点击第一个卡罗司的图像时，它将在滑块中显示，但是，如果我点击关于第二辆卡车的图像也显示在同一个滑块上。

我该怎么做？

thanks =）

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中为两个不同的转盘使用相同的幻灯片

1 个答案: