将Bootstrap 4 Carousel与动画文本同步（morphext）

Question

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

我手动调整了它们的间隔，现在它有点工作，但是如果页面需要更长时间才能加载，它们有时会失去同步。

这是我的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 -->

这是完整代码的小提琴：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文档：

data-ride =“carousel”属性用于将轮播标记为从页面加载开始的动画。它不能与同一轮播的（冗余和不必要的）显式JavaScript初始化结合使用。

Answer 2

好的，我找到了一个解决方案，这是我到达的代码：

 $("#moving-text").Morphext({
    animation: "fadeInDown",
    separator: ",",
    speed: 4000,
    //After text animation is complete, initiate carousel
    complete: function () {
        $("#hero-slider").carousel("next")
    }
});

它在文本完成动画后触发旋转木马。