在那里,我使用了2个旋转木马,第1个是滑动到文本,第二个是在移动框架内导航图像,但是如果它将通过导航器然后移动则两个都不会同时滑动 住在http://ashish.net63.net如果你有这种类型的alider的任何其他旋转木马,我在这里使用过自行车旋转木马请提前帮助我
$(function(){
$('.carousel-sync').on('slid.bs.carousel', function(ev) {
$('.carousel-sync').removeClass('sliding');
});
$('.carousel-indicators li').on('click', function() {
$('#myCarousel1,#myCarousel2').carousel(parseInt(this.getAttribute('data-slide-to')));
});
});
<div class="col-md-6 col-sm-12 col-xs-12">
<div id="myCarousel1" class="carousel slide carousel-sync" data-ride="carousel" data-pause="false">
<ol class="carousel-indicators">
<li data-slide-to="0" class="active"></li>
<li data-slide-to="1"></li>
<li data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
<a class="carousel-arrow carousel-arrow-prev" href="[id*=myCarousel]" data-slide="prev">
</a>
<a class="carousel-arrow carousel-arrow-next" href="[id*=myCarousel]" data-slide="next">
</a>
</div><!-- /.carousel -->
2nd carousel from here
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="mo-holder img-responsive">
<div id="myCarousel2" class="carousel slide carousel-sync" data-ride="carousel" data-pause="false">
<div class="carousel-inner">
<div class="item active">
<img src="images/1screen.jpg" class="img-responsive" alt="...">
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
您可以使用以下内容:
$( document ).ready(function() {
$('#carousel1').carousel({
interval: 10000
});
$('#carousel2').carousel({
interval: 10000
});
});
这样两个旋转木马将在幻灯片之间以10秒的间隔启动。