本文介绍了Bootstrap嵌套轮播活动控件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对Bootstrap嵌套轮播有疑问；单击内部轮播时，它也会更改外部轮播的活动li，这是不正确的.
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.
任何人都可以帮忙吗?
$('#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>推荐答案
基本上，不支持嵌套轮播，请在 github
basically, nested carousel is not supported, find more information on github
但是您可以尝试一些变通办法(为我工作)，例如下面的示例(我正在使用jquery)，在该例中，我将临时更改子传送带内项目的活动"类.并在父轮播活动结束后将其添加回去
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
*/
});
这篇关于Bootstrap嵌套轮播活动控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！