javascript - Bootstrap 嵌套轮播事件控件

Question

我对 Bootstrap 嵌套轮播有疑问；单击内部轮播时，它还会更改外部轮播的事件 li，这是不正确的。

同样点击外部轮播控件，实习生轮播不再工作。

有人能帮忙吗？

    $('#custom_carousel').on('slide.bs.carousel', function (evt) {
        $('#custom_carousel > .controls li.active').removeClass('active');
        $('#custom_carousel > .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
    });

    $('#intern_carousel').on('slide.bs.carousel', function (evt) {
        $('#intern_carousel > .controls .active').closest('li').removeClass('active');
        $('#intern_carousel > .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
    });

.jumbotron.carousel-slider, .slider-cont > .row > div { padding: 0; }
.jumbotron .img-responsive { margin-bottom: 15px; }
.slider-cont {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0;
}
/* Override default Bootstrap classes */
.carousel-inner { font-size: 12px; }
.carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
    width: 100% !important;
}
#custom_carousel .carousel-inner > .item > a > img, #custom_carousel .carousel-inner > .item > img,
#custom_carousel .img-responsive, #custom_carousel .thumbnail a > img, #custom_carousel .thumbnail > img {
    width: 100% !important;
}

.slider-cont > .row { margin: 0; }
#custom_carousel .carousel-control .glyphicon-menu-left, #custom_carousel .carousel-control .glyphicon-menu-right { top: 45%; right: 50%; font-size: 36px; position: inherit; }
/*#custom_carousel .carousel-control { border: 2px solid red; }*/
#custom_carousel .item {
    color:#000;
    background-color:#eee;
}
#custom_carousel .controls{
    overflow-x: auto;
    overflow-y: hidden;
    padding:0;
    margin:0;
    white-space: nowrap;
    text-align: center;
    position: relative;
    background:#ddd;
}
#custom_carousel .controls li {
    display: table-cell;
    width: 1%;
    max-width:90px;

    /*background-color: rgb(234,234,234); opacity: 0.2;*/
}
#custom_carousel .controls li.active {
    border-top:3px solid #e53d20;
    position: relative;
}
#custom_carousel li.active a { font-weight: bold; }
#custom_carousel img { margin: 0; }
#custom_carousel .controls > .nav a {
    color: #6e6e6e;
    font-size: 16px;
    /*font-weight: 400;*/
    padding: 18px 15px;
}
/* ******************* BEGIN Interne Carousels ******************* */
.interne-carousel {
    background-color: #ffff00;
    bottom: 142px;
    height: 150px;
    left: 0;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    right: 0;
    width: 500px;
}

#intern_carousel {
    width: 500px;
    left: 0;
    margin: 0 auto;
    padding: 0;
}
#intern_carousel .item { text-align: center; }
#intern_carousel img { border: 2px #a29e9e solid; }
#intern_carousel .controls li.active img { border: 2px red solid; }
#intern_carousel .carousel-control { color: red; background: none; }

#intern_carousel .controls li.active, #intern_carousel .controls li.active {
    border-top: 3px solid yellowgreen;
    position: relative;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron carousel-slider">
    <div class="container slider-cont">
        <div class="row">
            <div class="col-md-12">
                <!-- Begin Carousel -->
                <div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="2500">
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <div class="container slider-cont">
                                <div class="row">
                                    <div class="col-md-12">
                                        <img src="http://placehold.it/672x301/cccccc/ffffff" alt="Slide" class="img-responsive">

                                        <div class="interne-carousel">
                                            #####!!! interne-carousel !!!#####
                                            <!-- Begin Interne Carousel -->
                                            <div id="intern_carousel" class="carousel slide" data-ride="carousel" data-interval="2500">
                                                <!-- Wrapper for slides -->
                                                <div class="carousel-inner">
                                                    <div class="item active">
                                                        <div class="container slider-cont">
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                    <h3>Lorem Ipsum 1</h3>
                                                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invid.
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="item">
                                                        <div class="container slider-cont">
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                    <h3>Lorem Ipsum 2</h3>
                                                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invid.
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="item">
                                                        <div class="container slider-cont">
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                    <h3>Lorem Ipsum 3</h3>
                                                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invid.
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- End Item -->
                                                </div>
                                                <!-- End Carousel Inner -->

                                                <a class="left carousel-control" href="#intern_carousel" data-slide="prev"><span
                                                        class="glyphicon glyphicon-menu-left"></span></a>
                                                <a class="right carousel-control" href="#intern_carousel" data-slide="next"><span
                                                        class="glyphicon glyphicon-menu-right"></span></a>


                                                <div class="controls">
                                                    <ul class="nav">
                                                        <li data-target="#intern_carousel" data-slide-to="0" class="active">

                                                            <a href="#"><img src="http://placehold.it/75x44/cccccc/ffffff" alt=""/></a>
                                                        </li>
                                                        <li data-target="#intern_carousel" data-slide-to="1">
                                                            <a href="#"><img src="http://placehold.it/75x44/999999/cccccc" alt=""/></a>
                                                        </li>
                                                        <li data-target="#intern_carousel" data-slide-to="2">
                                                            <a href="#"><img src="http://placehold.it/75x44/cccccc/ffffff" alt=""/></a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <!-- End Interne Carousel -->
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="container slider-cont">
                                <div class="row">
                                    <div class="col-md-12"><img src="http://placehold.it/672x301/ffffff/cccccc" alt="Slide" class="img-responsive"></div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="container slider-cont">
                                <div class="row">
                                    <div class="col-md-12"><img src="http://placehold.it/672x301/cccccc/ffffff" alt="Slide" class="img-responsive"></div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="container slider-cont">
                                <div class="row">
                                    <div class="col-md-12"><img src="http://placehold.it/672x301/ffffff/cccccc" alt="Slide" class="img-responsive"></div>
                                </div>
                            </div>
                        </div>
                        <!-- End Item -->
                    </div>
                    <!-- End Carousel Inner -->

                    <a class="left carousel-control" href="#custom_carousel" data-slide="prev"><span
                            class="glyphicon glyphicon-menu-left"></span></a>
                    <a class="right carousel-control" href="#custom_carousel" data-slide="next"><span
                            class="glyphicon glyphicon-menu-right"></span></a>


                    <div class="controls">
                        <ul class="nav">
                            <li data-target="#custom_carousel" data-slide-to="0" class="active">
                                <a href="#">Lorem Ipsum</a>
                            </li>
                            <li data-target="#custom_carousel" data-slide-to="1">
                                <a href="#">Sed ut perspiciatis</a>
                            </li>
                            <li data-target="#custom_carousel" data-slide-to="2">
                                <a href="#">Lorem Ipsum</a>
                            </li>
                            <li data-target="#custom_carousel" data-slide-to="3">
                                <a href="#">Sed ut perspiciatis</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- End Carousel -->

            </div>
        </div>

    </div>
</div>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Answer 1

基本上不支持嵌套轮播，在github上找到更多信息

但是您可以尝试一些解决方法(对我有用)，例如下面的示例(我正在使用 jquery)，我将在其中临时更改子轮播中元素的“事件”类。并在父 carouse 上的事件完成后将其添加回来

btn.on("click", function () {
                /*
                 Fix for Nested Carousel:
                 Before any sliding action, need to "hide" inner carouse active items
                 After sliding action, update active items again
                 */

                $.each(carourselInnerHolder.find(".child-carousel.active"), function (i, item) {
                    $(item).removeClass("active").addClass("active-fix-nested");
                });


                setTimeout(function() {
                    Metronic.unblockUI(); //blockUI to avoid multiple actions immediately
                }, 200);

                carouselHolder.carousel(carouselIndex); // action that trigger update parent Carousel to slide to new item with this index

                $.each(carourselInnerHolder.find(".child-carousel.active-fix-nested"), function (i, item) {
                    $(item).addClass("active").removeClass("active-fix-nested");
                });

                /*
                 END Fix for Nested Carousel
                 */

            });