如何阻止Bootstrap carousel自动滑动？

8fq7wneg 于 2022-12-31 发布在 Bootstrap

关注(0)|答案(8)|浏览(334)

我已经建立了一个引导视频轮播。它工作得很好，但是，我唯一的问题是轮播保持滑动到下一张幻灯片后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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/26133618/how-to-stop-bootstrap-carousel-from-autosliding

8条答案

按热度按时间

cxfofazt1#

通过添加data-interval="false"

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

从文档中
选项-间隔-..如果为假，转盘将不会自动循环。

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">

文件

赞(0）回复(0）举报 2022-12-31

oknrviil2#

有两种方法。

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

谢谢：）

赞(0）回复(0）举报 2022-12-31

iyfamqjs3#

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

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

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

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

赞(0）回复(0）举报 2022-12-31

omvjsjqw4#

将此代码粘贴到自定义Javascript文件中。
$（'. carousel'）.传送带（{interval：错误}）;

赞(0）回复(0）举报 2022-12-31

drnojrws5#

在react-bootstrap中，为了停止循环，必须使用

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

赞(0）回复(0）举报 2022-12-31

umuewwlo6#

Bootstrap https://getbootstrap.com/docs/5.1/components/carousel/上有一个更新
数据-bs-间隔=“假”

赞(0）回复(0）举报 2022-12-31

yfwxisqw7#

对于 Bootstrap v5.2：只需从具有“carousel slide”的div标记中删除“data-bs-ride：carousel”部分，即可停止自动幻灯片

赞(0）回复(0）举报 2022-12-31

khbbv19g8#

通过向转盘ID或类添加data-interval=“false”并删除data-ride=“carousel”

赞(0）回复(0）举报 2022-12-31

我来回答

如何阻止Bootstrap carousel自动滑动？

8条答案

2021年更新

1.

2022年更新： Bootstrap 5.x

Bootstrap 4.x

2.

相关问题

热门标签

最新问答