Bootstrap nested carousels active controls

问题:

I have a problem with Bootstrap nested carousels; On click of the intern carousel it changes also the the active li of the extern carousel, which ist not correct.

Also on click on the extern carousel controls, the intern carousel don't work any more.

Can anyone help?

    $('#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>

回答1:

basically, nested carousel is not supported, find more information on github

But you can try for some workaround (worked for me), like an example below (i'm using jquery), where i will temporarily change the "active" class of item insides child-carousel(s). And add it back after the event on parent carouse has completed

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

            });