停止自动播放到轮播嵌入视频上的下一张幻灯片

Question

所以我想在我的网站上添加一个部分，我将视频作品集放在轮播库中。问题是这个轮播不需要这个就跳到下一帧。我该如何阻止这个？我只希望人们仅在按下向后、向前按钮时更改幻灯片视频。

HTML：

                <div class="row">
                    <div class="col col-md-10 offset-md-1 col-lg-8 offset-lg-2">
                        <!-- Carousel -->
                        <div id="carousel-example" class="carousel slide">
                            <ol class="carousel-indicators">
                                <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
                                <li data-target="#carousel-example" data-slide-to="1"></li>
                                <li data-target="#carousel-example" data-slide-to="2"></li>
                                <li data-target="#carousel-example" data-slide-to="3"></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <div class="embed-responsive embed-responsive-16by9">
                                        <iframe class="embed-responsive-item" src="#" allowfullscreen></iframe>
                                    </div>
                                </div>
                                        <div class="carousel-item">
                                    <div class="embed-responsive embed-responsive-16by9">
                                        <iframe class="embed-responsive-item" src="#" allowfullscreen></iframe>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <div class="embed-responsive embed-responsive-16by9">
                                        <iframe class="embed-responsive-item" src="#" allowfullscreen></iframe>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <div class="embed-responsive embed-responsive-16by9">
                                        <iframe class="embed-responsive-item" src="#" allowfullscreen></iframe>
                                    </div>
                                </div>
                            </div>
                            <a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" href="#carousel-example" role="button" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>

CSS：

/***** Top content *****/

.top-content { width: 100%; padding: 60px 0 120px 0; }

.top-content h1 { padding-top: 60px; color: #fff; }
.top-content .description { margin: 30px 0 0 0; padding-bottom: 30px; }
.top-content .description p { color: #fff; color: rgba(255, 255, 255, 0.8); }
.top-content .description a { color: #fff; color: rgba(255, 255, 255, 0.8); border-color: #fff; border-color: rgba(255, 255, 255, 0.8); }
.top-content .description a:hover,
.top-content .description a:focus { color: #fff; color: rgba(255, 255, 255, 0.8); }

.top-content .carousel { box-shadow: 0 0 15px 0 #444; }
.top-content .carousel-control-prev { left: -110px; border-bottom: 0; }
.top-content .carousel-control-next { right: -110px; border-bottom: 0; }
.top-content .carousel-indicators { bottom: -80px; }
.top-content .carousel-indicators li { width: 16px; height: 16px; margin-left: 5px; margin-right: 5px; border-radius: 50%; }


/***** Section 1 *****/

.section-1-box { padding-top: 30px; text-align: left; }

.section-1-box .section-1-box-icon {
    width: 80px; height: 80px; margin: 0 auto;
    
    background: #8542a0; /* Old browsers */
    background: -moz-linear-gradient(top,  #a365bc 0%, #8542a0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a365bc), color-stop(100%,#8542a0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #a365bc 0%,#8542a0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #a365bc 0%,#8542a0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #a365bc 0%,#8542a0 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #a365bc 0%,#8542a0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a365bc', endColorstr='#8542a0',GradientType=0 ); /* IE6-9 */

    font-size: 40px; color: #fff; line-height: 80px; text-align: center;
    -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
    -o-transition: all .6s; -moz-transition: all .6s; -webkit-transition: all .6s; -ms-transition: all .6s; transition: all .6s;
}

.section-1-box h3 { margin-top: 0; padding: 0 0 10px 0; }


/***** Section 2 *****/

.section-2-box { margin-top: 30px; text-align: left; }
.section-2-box h3 { margin-top: 0; }
.section-2-box-text .medium-paragraph { margin-top: 20px; margin-bottom: 20px; }


/***** Section 3 *****/

.section-3-box { margin-top: 30px; text-align: left; }

.section-3-box .section-3-box-icon {
    width: 60px; height: 60px; margin: 0 auto;
    
    background: #8542a0; /* Old browsers */
    background: -moz-linear-gradient(top,  #a365bc 0%, #8542a0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a365bc), color-stop(100%,#8542a0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #a365bc 0%,#8542a0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #a365bc 0%,#8542a0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #a365bc 0%,#8542a0 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #a365bc 0%,#8542a0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a365bc', endColorstr='#8542a0',GradientType=0 ); /* IE6-9 */
    
    font-size: 28px; color: #fff; line-height: 60px; text-align: center;
    -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}

.section-3-box h3 { margin-top: 0; padding: 0 0 10px 0; }

其中一个JS：

function scroll_to(clicked_link, nav_height) {
    var element_class = clicked_link.attr('href').replace('#', '.');
    var scroll_to = 0;
    if(element_class != '.top-content') {
        element_class += '-container';
        scroll_to = $(element_class).offset().top - nav_height;
    }
    if($(window).scrollTop() != scroll_to) {
        $('html, body').stop().animate({scrollTop: scroll_to}, 1000);
    }
}


jQuery(document).ready(function() {
    
    /*
        Navigation
    */
    $('a.scroll-link').on('click', function(e) {
        e.preventDefault();
        scroll_to($(this), $('nav').outerHeight());
    });
    // toggle "navbar-no-bg" class
    $('.top-content h1').waypoint(function() {
        $('nav').toggleClass('navbar-no-bg');
    });
    
    /*
        Background slideshow
    */
    
    //document ready
$(document).ready(function(){
    //Event for pushed the video
    $('#carousel-example').carousel({
        pause: true,
        interval: false
    });
});

Answer 1

你见过这个解决方案吗？：

Bootstrap Carousel : Remove auto slide

看起来你可以改变

data-interval="假"

在 HTML 中而不是尝试使用 jQuery。