如何创建同步轮播

How Can I create simultaneous carousels

本文关键字：同步 创建 何创建      更新时间：2023-09-26

即两个轮播位于同一位置，但其中一个始终处于隐藏状态，上面有两个按钮(锚点？(以打开任何一个：

<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

我为您创建了一个解决方案，可以满足您的需求。我创建了"按钮"来切换您要打开的轮播，并将轮播包装在带有 attr id="Car-#" class="Car-toggle"的div 中

目录 

<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();
相关文章：