如何通过单个导航器同时导航两个旋转木马

时间:2014-05-23 09:54:01

标签: javascript jquery twitter-bootstrap carousel

enter image description here在那里,我使用了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>

1 个答案:

答案 0 :(得分:0)

您可以使用以下内容:

$( document ).ready(function() {

         $('#carousel1').carousel({
         interval: 10000
     });

     $('#carousel2').carousel({
         interval: 10000
     });
});

这样两个旋转木马将在幻灯片之间以10秒的间隔启动。