Question

我在同一页面上寻找多个旋转木马的脚本，我找到了一个非常有用的答案，我只是想问你是否可以帮我编辑脚本，因为我需要它非自动播放。

以下是我找到的例子

＆＃13;

 $('.customCarousel').carousel({
     interval: 4000
 });

 // handles the carousel thumbnails
 $('[id^=carousel-selector]').click(function () {
     var id_selector = $(this).attr('id');
     var id = id_selector.substr(id_selector.length - 1);
     id = parseInt(id);
     var parent = $(this).closest('ul').data('carousel');
     $('#myCarousel' + parent).carousel(id);
     $('[id^=carousel-selector' + parent +'-]').removeClass('selected');
     $(this).addClass('selected');
 });

 // when the carousel slides, auto update
 $('.customCarousel').on('slid', function (e) {
     var cont = $(this).data('carousel');
     var id = $('#myCarousel'+ cont +' .item.active').data('slide-number');
     id = parseInt(id);
     $('[id^=carousel-selector' +cont+'-]').removeClass('selected');
     $('[id^=carousel-selector'+cont+'-' + id + ']').addClass('selected');
 });

＆＃13;

 .selected img {
     opacity:0.5;
 }

＆＃13;

<!-- thumb navigation carousel -->
<div class="col-md-12">
    <!-- thumb navigation carousel items -->
    <ul class="list-inline" data-carousel="1">
        <li> <a id="carousel-selector1-0"  class="selected">
            <img src="http://placehold.it/80x60&amp;text=one" class="img-responsive"/>
      </a>
        </li>
        <li> <a id="carousel-selector1-1">
            <img src="http://placehold.it/80x60&amp;text=two" class="img-responsive"/>
      </a>
        </li>
        <li> <a id="carousel-selector1-2">
            <img src="http://placehold.it/80x60&amp;text=three" class="img-responsive"/>
      </a>
        </li>
        <li> <a id="carousel-selector1-3">
            <img src="http://placehold.it/80x60&amp;text=four" class="img-responsive"/>
      </a>
        </li>
    </ul>
</div>
<!-- main slider carousel -->
<div class="row">
    <div class="col-md-12" id="slider">
        <div class="col-md-12" id="carousel-bounding-box">
            <div id="myCarousel1" data-carousel="1" class="carousel slide customCarousel">
                <!-- main slider carousel items -->
                <div class="carousel-inner">
                    <div class="active item" data-slide-number="0">
                        <img src="http://placehold.it/1200x480&amp;text=one" class="img-responsive"/>
                    </div>
                    <div class="item" data-slide-number="1">
                        <img src="http://placehold.it/1200x480/888/FFF" class="img-responsive"/>
                    </div>
                    <div class="item" data-slide-number="2">
                        <img src="http://placehold.it/1200x480&amp;text=three" class="img-responsive"/>
                    </div>
                    <div class="item" data-slide-number="3">
                        <img src="http://placehold.it/1200x480&amp;text=four" class="img-responsive"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--/main slider carousel-->

<hr/>

<!-- thumb navigation carousel -->
<div class="col-md-12">
    <!-- thumb navigation carousel items -->
    <ul class="list-inline" data-carousel="2">
        <li> <a id="carousel-selector2-0" class="selected">
            <img src="http://placehold.it/80x60&amp;text=one" class="img-responsive"/>
      </a>
        </li>
        <li> <a id="carousel-selector2-1">
            <img src="http://placehold.it/80x60&amp;text=two" class="img-responsive"/>
      </a>
        </li>
        <li> <a id="carousel-selector2-2">
            <img src="http://placehold.it/80x60&amp;text=three" class="img-responsive"/>
      </a>
        </li>
        <li> <a id="carousel-selector2-3">
            <img src="http://placehold.it/80x60&amp;text=four" class="img-responsive"/>
      </a>
        </li>
    </ul>
</div>
<!-- main slider carousel -->
<div class="row">
    <div class="col-md-12" id="slider">
        <div class="col-md-12" id="carousel-bounding-box">
            <div id="myCarousel2" data-carousel="2" class="carousel slide customCarousel">
                <!-- main slider carousel items -->
                <div class="carousel-inner">
                    <div class="active item" data-slide-number="0">
                        <img src="http://placehold.it/1200x480&amp;text=one" class="img-responsive"/>
                    </div>
                    <div class="item" data-slide-number="1">
                        <img src="http://placehold.it/1200x480/888/FFF" class="img-responsive"/>
                    </div>
                    <div class="item" data-slide-number="2">
                        <img src="http://placehold.it/1200x480&amp;text=three" class="img-responsive"/>
                    </div>
                    <div class="item" data-slide-number="3">
                        <img src="http://placehold.it/1200x480&amp;text=four" class="img-responsive"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--/main slider carousel-->

＆＃13;

提前谢谢。

Answer 1

我不确定您使用的滑块，但在一般情况下，滑块提供的配置可以在初始化时通过，如下所示，

$('.customCarousel').carousel({
 interval: 4000, AutoPlay:false  });

尝试使用，如果不起作用请分享滑块的javascript文件。

如何停止自动播放旋转木马

1 个答案: