如何创建同步轮播

Question

即两个轮播在同一位置，但始终隐藏一个，上面有两个按钮（锚点？）可以打开其中一个：

<div class="row">
                <div class="col-lg-12">

                    <div class="carousel slide" data-ride="carousel">
                        <!-- Wrapper for slides -->
                        <div id="floorsCarousel" class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
                            </div>
                            <div class="item">
                                 <img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
                            </div>
                            <div class="item">
                                <img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
                            </div>
                            <div class="item">
                                <img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
                            </div>
                        </div>
                    </div>

我的 JS 似乎没有工作，这是我的 JS 文件中的内容：

var floorsCarousel = document.getElementById("floorsCarousel");
    var spaceCarousel = document.getElementById("spaceCarousel");

    function floorPlans() {
        if (floorsCarousel.style.display==="none") {
            floorsCarousel.style.display="inherit";
        }
        if (spaceCarousel.style.display!=="none") {
            spaceCarousel.style.display="none";
        }
        return false;
    }

    function spacePlans() {
        if (spaceCarousel.style.display==="none") {
            spaceCarousel.style.display="inherit";
        }
        if (floorsCarousel.style.display!=="none") {
            floorsCarousel.style.display="none";
        }
        return false;
    }

JSFiddle

Answer 1

我已经为您创建了一个解决方案，可以满足您的需求here。我创建了“按钮”来切换您希望打开的轮播并将轮播包装在一个 div 中，并使用 attr 的 id="Car-#" class="Car-toggle"

HTML

<div class="row">
    <button class="toggleCar" data-for="Car-1">Toggle 1</button>
    <button class="toggleCar" data-for="Car-2">Toggle 2</button>
    <div class="col-lg-12">
        <div id="Car-1" class="Car-toggle">carousel One
            <div class="carousel slide" data-ride="carousel">
                <!-- Wrapper for slides -->
                <div id="floorsCarousel" class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
                    </div>
                    <div class="item">
                        <img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
                    </div>
                    <div class="item">
                        <img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
                    </div>
                    <div class="item">
                        <img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
                    </div>
                </div>
            </div>
        </div>
        <div id="Car-2" class="Car-toggle">carousel Two
            <div class="carousel slide" data-ride="carousel">
                <!-- Wrapper for slides -->
                <div id="floorsCarousel" class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
                    </div>
                    <div class="item">
                        <img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
                    </div>
                    <div class="item">
                        <img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
                    </div>
                    <div class="item">
                        <img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Javascript（自您使用引导程序以来的 JQuery）

$('.toggleCar').click(function(){
var CarWrapperName=$(this).attr('data-for');
    $('.Car-toggle').hide();
    $('#'+CarWrapperName).show();
});

//Hide All Toggles and Show Default
$('.Car-toggle').hide();
$('#Car-1').show();