javascript - 将 Bootstrap 4 Carousel 与动画文本同步(morphext)

Question

我使用 bootstrap 4 轮播和一些使用 morphext 的动画文本制作了一个英雄部分。它们应该同时循环。

我已经手动调整了它们的间隔，现在它可以正常工作，但是有时它们会不同步，例如，如果页面需要更长的时间来加载。

这是我的 html:

<!-- /// HERO SECTION /// -->
<div id="hero-section" class="small-margin">
    <div class="row hero-unit">
        <div class="col-md-5">
            <div class="hero-caption"><!-- Main Tagline -->
                <h1>WE MAKE <br> <span id="moving-text" class="colored">AWESOME, BEAUTIFUL, EPIC</span> <br> GAMES <br></h1>
            </div>
        </div>
        <div class="col-md-7">
            <div id="hero-slider" class="carousel slide carousel-fade" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="https://imgur.com/5Gjknuf.jpg" class="d-block w-100" alt="img">
                    </div>
                    <div class="carousel-item">
                      <img src="https://imgur.com/KSC44FR.jpg" class="d-block w-100" alt="img">
                    </div>
                    <div class="carousel-item">
                      <img src="https://imgur.com/6pqwyXu.jpg" class="d-block w-100" alt="img">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><!-- Hero Section End -->

这是一个包含完整代码的 fiddle :https://jsfiddle.net/vn2aboeh/

有没有办法使用 javascript/jquery 将文本与轮播同步？

谢谢

Answer 1

这是您的 HTML。删除 data-ride="carousel"

所以这样:

<!-- /// HERO SECTION /// -->
    <div id="hero-section" class="small-margin">
        <div class="row hero-unit">
            <div class="col-md-5">
                <div class="hero-caption"><!-- Main Tagline -->
                    <h1>WE MAKE <br> <span id="moving-text" class="colored">AWESOME, BEAUTIFUL, EPIC</span> <br> GAMES <br></h1>
                </div>
            </div>
            <div class="col-md-7">
                <div id="hero-slider" class="carousel slide carousel-fade">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="https://imgur.com/5Gjknuf.jpg" class="d-block w-100" alt="img">
                        </div>
                        <div class="carousel-item">
                          <img src="https://imgur.com/KSC44FR.jpg" class="d-block w-100" alt="img">
                        </div>
                        <div class="carousel-item">
                          <img src="https://imgur.com/6pqwyXu.jpg" class="d-block w-100" alt="img">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- Hero Section End -->

这是来自 Bootstrap 文档:

The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.