引导嵌套旋转木马活动控件
Bootstrap nested carousels active controls
我有一个问题与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>基本上，嵌套轮播是不支持的，找到更多的信息在github
但是你可以尝试一些变通方法(对我有用)，就像下面的例子(我使用jquery)，我将暂时改变child-carousel(s)内部项目的"active"类。并在父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
*/
});
相关文章：
- 音频控件在mouseover上显示，在mouseout上淡出
- 后焦点更改为IE 11中的地址栏，而不是转移到表单中的下一个控件
- 如何在读取XLS/XLSX本地文件时，使用IE的javascript代码启用未标记为安全的ActiveX控件
- Windows形成web浏览器控件和Javascript更改的DOM
- 如何将javascript事件从web浏览器wpf控件发送到wpf的c#代码
- 如何更改文本框控件的不透明度值
- 所有控件的组合框
- 创建一个方法，通过一个窗口进行迭代并获取Titanium中的所有控件
- 在angularjs中创建自定义控件的推荐方法
- 自定义控件中的双向绑定在SAPUI5中不起作用
- 如何在ASP中为用户控件添加Javascript对象网
- Dynamics 2016内部部署Crm客户端脚本.选项集控件类型缺少方法
- 从服务器获取数据并在选择控件中使用ng选项无法显示选项
- 在HTML5画布上添加按钮和控件
- 隐藏HTML5视频控件
- 如果控件位于活动的 RadPageView 中，Javascript 是什么?
- 为AJAX选项卡控件设置活动选项卡
- 启动日历控件，以显示活动的当前周
- 带分页的引导旋转木马-当使用旋转木马控件时，当前幻灯片在导航中不活动
- 引导嵌套旋转木马活动控件
