如何停止Bootstrap走马灯自动滑动？

Question

如何停止Bootstrap走马灯自动滑动？

57

我已经建立了一个Bootstrap视频轮播。它运行良好，但唯一的问题是轮播在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>

- user3123222

9个回答

35

有两种方法。

1.

更新2022：Bootstrap 5.x

在你的HTML代码中，你需要使用data-bs-interval="false"

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

Bootstrap 4.x

在你的HTML代码中，需要使用data-interval="false"选项。

<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
    });
});

谢谢 :)

- Vinod Kumar

感谢提供Javascript部分的代码。我已经加入了data-interval="false"，但它并没有生效，因为在我的代码中有一个$("#carousel-id").carousel()。我没有意识到留空的carousel()会激活它。 - Azurespot

11

只需从HTML代码中删除属性data-ride=”carousel”即可停止自动播放。

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

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

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

- Abhay Singh

然后要启动它，使用 $('.carousel').carousel('cycle');。 - Yvan

5

将以下代码粘贴到您的自定义JavaScript文件中。 $('.carousel').carousel({ interval: false });

意思是让轮播图停止自动轮播。

- Tariqul_Islam

3

有一个Bootstrap更新，详见 https://getbootstrap.com/docs/5.1/components/carousel/。

data-bs-interval="false"

（译注：此处为HTML代码，无需翻译）

- IrinaPenzina

1

这应该是一个注释。 - Lajos Arpad

2

针对Bootstrap v5.2版本：只需从具有“carousel slide”的div标记中删除“data-bs-ride：carousel”部分即可停止自动滑动。

- Pushan Basu

2

在react-bootstrap中，为了停止轮播，你需要使用：

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

- DahWaR

0

通过向轮播图的ID或类添加data-interval="false"并删除data-ride="carousel"

- Mohd Amir

0

我花了很多时间研究为什么data-bs-ride=false对于这个不起作用，现在我明白了。

在5.0和5.1版本中，在选项子部分的文档中注意到它说：

在用户手动循环第一项后自动播放走马灯。如果设置为“carousel”，则在加载时自动播放走马灯。

这只是意味着data-bs-ride=false、data-bs-ride=true或data-ride="carousel"仍然会自动滑动，所以我们必须使用

data-interval="false"并删除data-ride="carousel"

但在5.2版本中，文档说：

如果设置为true，则在用户手动循环第一项后自动播放走马灯。如果设置为“carousel”，则在加载时自动播放走马灯。

因此，我们可以通过仅使用data-bs-ride=false或仅删除data-bs-ride标签来停止自动播放，因为默认情况下为false。

- Suchint

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- im_brian_d · Accepted Answer

通过添加 data-interval="false"

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

来自文档

选项 - 间隔 - 如果为 false，则轮播将不会自动循环。

2021 更新

在 Bootstrap 5 中，它是 data-bs-interval="false"

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

文档