Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
309 views
in Technique[技术] by (71.8m points)

html - How to stop Bootstrap carousel from autosliding?

I have built a bootstrap video carousel. It is working just fine but, the only problem I have is the carousel keeps sliding to the next slide after 5 seconds. How do I make it stop autosliding and only slide when the user clicks on the left or right arrows? I have pasted the code below.

    <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 SoftwareSample WebsitevideosMichael 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 SoftwareSample WebsitevideosVick 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 SoftwareSample WebsitevideosMichael Vick Scramble Plays vs Rams 2011.mp4" />
                    </video>
                </div>
          </div>
    </div>
question from:https://stackoverflow.com/questions/26133618/how-to-stop-bootstrap-carousel-from-autosliding

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

By adding data-interval="false"

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

From the documentation

Option - Interval - ..If false, carousel will not automatically cycle.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

[2] html - How to create even cell spacing within a

1.4m articles

1.4m replys

5 comments

57.0k users

...