Question

我制作了一个带有引导程序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 -->

以下是完整代码：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")
    }
});

在文本完成动画制作后触发轮播。

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

2 个答案: