Bootstrap 4轮播不自动播放答案

【问题标题】：Bootstrap 4 carousel doesn't autoplayBootstrap 4轮播不自动播放
【发布时间】：2017-11-03 01:23:47
【问题描述】：

编辑：看起来它终于可以工作了，问题不在于它显然不起作用，而是它没有自动播放，我必须在左侧或右侧单击一次，然后它就会起作用： /如何做到自动播放呢？ “trigger.click”的方式实在是……糟透了。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <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>
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <img src="/slider1.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
            <img src="/slider2.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img src="/slider3.jpg" alt="Third slide">
        </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="icon-prev" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="icon-next" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

我的 index.html 头：

<!DOCTYPE html>
<html lang="en" style="height: 100vh;">
<head>
    <base href="/">
    <link rel="icon" type="image/x-ico" href="/favicon.ico" />
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY"             crossorigin="anonymous">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>TV</title>
    <script src="bower_components/angular/angular.js"></script>
    <script src="/bower_components/angular-component-router/angular_1_router.js"></script>
    <script src="/bower_components/angular-component-router/ng_route_shim.js"></script>
    <script src="/contents/contents.component.js"></script>
    <script src="bootstrap.js"></script>
    <script src="/contents/builderror/buildError.component.js"></script>
    <script src="/contents/infosAno/infosAno.component.js"></script>
    <script src="/contents/infosImp/infosImp.component.js"></script>
    <script src="/contents/slider/slider.component.js"></script>
    <script src="/contents/slider/carousel.js"></script>

</head>

我正在使用 Angular 1.5 制作单页应用程序。

【问题讨论】：

发布你的源代码
是的，没有来源 - 没有答案
你是否加入了bootstrap.js？
我编辑了我的主题。

标签： javascript jquery bootstrap-4

【解决方案1】：

该示例在没有任何 js 文件的情况下运行，只需确保您必须在引导 js 文件之前包含 Jquery

这是我刚刚创建的js小提琴代码。

Link: https://jsfiddle.net/nxtvhj5r/

【讨论】：

哪个js？引导程序.js ？我没有使用专用于轮播的 js 文件
不，自定义的js文件，你初始化轮播的地方。
啊，是的，对不起，所以我在我的 carousel.js 中写了这个，但没有改变（对于自动播放，这最终是真正的问题，并且轮播在没有这个 js 文件的情况下工作：/ 但是我想我需要它来自动播放）
更新我的答案并为你创建了一个jsfiddle代码。
谢谢！但这与我的代码完全相同：/我的代码也适用于 jsfiddle：/