Question

编辑：它看起来终于有效了，问题不在于它显然不起作用，它不会自动播放，我必须单击左侧或右侧一次，然后它将工作：/如何进行自动播放？＆＃34; trigger.click＆＃34;方式真的很可怕。

<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制作单页应用程序。

Answer 1

没有任何js文件的示例运行只是确保你必须在bootstrap js文件之前包含Jquery

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

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

Bootstrap 4轮播没有自动播放

1 个答案: