如何创建同步轮播

i.e. two carousels in the same location but one is always hidden, with two buttons (anchors?) above to turn either one on:

即两个转盘位于同一位置,但一个始终隐藏,上面有两个按钮(锚点?),可以打开其中一个:

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

My JS does not appear to be working, this is what I have in my JS file:

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

1 个解决方案

#1

I have created a solution for you that does what you need here. I've created "buttons" to toggle which carousel you wish to open and wrapped the carousel's in a div with the attr's id="Car-#" class="Car-toggle"

我已经为您创建了一个解决方案,可以满足您的需求。我创建了“按钮”来切换你想要打开的旋转木马并将旋转木马包裹在一个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 since your using bootstrap)

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