1

Question

我已经构建了一个自举视频轮播。它工作得很好但是，我唯一的问题是旋转木马在5秒后继续滑动到下一张幻灯片。如何使其停止自动滑动并仅在用户单击左箭头或右箭头时滑动？我已粘贴下面的代码。

    <div class="container">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-pause=hover>
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <div class="embed-responsive embed-responsive-16by9">
                        <video class="embed-responsive-item" autoplay muted id="homevid">
                            <source src="C:\Development Software\Sample Website\videos\Michael Vick 88 yard touchdown pass to DeSean Jackson.mp4" />
                        </video>
                    </div>
                <div class="carousel-caption">

            </div>
        </div>
            <div class="item">
                <div class="embed-responsive embed-responsive-16by9">
                    <video class="embed-responsive-item" autoplay muted id="homevid">
                        <source src="C:\Development Software\Sample Website\videos\Vick to Jeremy Maclin for 50 Yard TD.mp4" />
                    </video>
                </div>

            </div>
            <div class="item">
                <div class="embed-responsive embed-responsive-16by9">
                    <video class="embed-responsive-item" autoplay muted id="homevid">
                        <source src="C:\Development Software\Sample Website\videos\Michael Vick Scramble Plays vs Rams 2011.mp4" />
                    </video>
                </div>
          </div>
    </div>

Answer 1

添加data-interval="false"

<div id="carousel-example-generic" class="carousel slide" data-interval="false" data-ride="carousel" data-pause="hover" >

来自documentation

选项 - 间隔 - ..如果错误，轮播将不会自动循环。

Answer 2

有两种方式。

1

在HTML代码中，您只需使用 data-interval =＆＃34; false＆＃34;

<div id="your-carousel-id" class="carousel slide" data-interval="false">
    .....
</div>

2

如果你想在Jquery的帮助下做，那么你需要添加。

//document ready
$(document).ready(function(){
    //Event for pushed the video
    $('#your-carousel-id').carousel({
        pause: true,
        interval: false
    });
});

谢谢:)

Answer 3

将此代码粘贴到您的自定义Javascript文件上。

$（'。carousel'）。carousel（{ 间隔：假 }）;

Answer 4

要停止自动播放，只需从htmlcode中删除属性 data-ride =“ carousel”

<div id="carousel-example" class="carousel slide" data-ride="carousel">....</div>

还有另一种停止自动播放的方法，只需在js文件中添加以下代码即可

$(window).load(function() {
    $('.carousel').carousel('pause'); 
});

Answer 5

在react-bootstrap中，要停止循环，您必须使用

<Carousel interval={null}>
   ...
</Carousel>

如何从自动滑动中停止Bootstrap轮播？

5 个答案:

1

2