我的旋转木马工作正常,彼此之间滑动完美,但我需要将项目作为活动课程,然后滑动并单击导航栏。任何人都可以帮助我在正确的方向吗?
HTML CODE:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">slide 1</a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#">slide 2</a></li>
<li data-target="#myCarousel" data-slide-to="2"><a href="#">slide 3</a></li>
</ul>
</div>
</nav>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="wrapper">
<%-- Slide 1 --%>
</div>
</div>
<div class="item">
<div class="wrapper">
<%-- Slide 2 --%>
</div>
</div>
div class="item">
<div class="wrapper">
<%-- Slide 3 --%>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
答案 0 :(得分:1)
我是通过分两个阶段分解任务来实现的。从旧指示符中删除.active类并将class .active添加到新指示符。
我使用了Bosc的想法,但在第一个中增加了一个附加功能。
以下是示例:http://www.bootply.com/NTPzTEm6dn
这是jQuery:
install_phantomjs()
&#13;
Shiny
&#13;
$(document).ready(function() {
$(".carousel").carousel({
interval: 5000
});
$('#myCarousel').on('slide.bs.carousel', function() {
$(".myCarousel-target.active").removeClass("active");
$('#myCarousel').on('slid.bs.carousel', function() {
var to_slide = $(".carousel-item.active").attr("data-slide-no");
$(".nav-indicators li[data-slide-to=" + to_slide + "]").addClass("active");
});
});
});
&#13;
答案 1 :(得分:0)
添加一些jquery / js,点击
添加和删除活动类$('.nav li').on('click', function(){
$('li.active').removeClass('active');
$(this).addClass('active');
});
更新:http://www.bootply.com/nxah8CQozF没有时间来解决这个问题,它有一些错误,比如第一张幻灯片没有再次激活,但希望你能搞清楚,或者至少给你一个起点。< / p>
$(document).ready(function() {
$(".carousel").carousel({
interval: 5000
});
$('#myCarousel').on('slide.bs.carousel', function () {
var to_slide;
to_slide = $(".carousel-item.active").attr("data-slide-no");
$(".myCarousel-target.active").removeClass("active");
$(".nav-indicators [data-slide-to=" + to_slide + "]").addClass("active");
});
});