2016-08-19 3 views
-2

EDIT: похоже, что это работает, проблема заключается не в том, что он не работает, кажется, что он не автовоспроизведен, я должен щелкнуть один раз слева или справа , а затем он будет работать:/Как сделать автовоспроизведение? Путь «trigger.click» действительно ... ужасный.Bootstrap 4 carousel не автовоспроизведение

<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> 

Я использую Угловое 1.5 сделать однократное применение страницу.

+1

опубликовать исходный код –

+1

Да, нет источника - нет ответов –

+1

Включили вы 'bootstrap.js'? –

ответ

0

Пример запуск без какого-либо файла JS просто убедитесь, что вы должны включить Jquery до того Bootstrap файла расслоения плотной

Вот JS скрипка код, который я только что создал.

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

Какой js? bootstrap.js? Я не использую js-файл, посвященный карусели –

+0

Нет, пользовательский файл js, где вы инициализируете карусель. –

+0

А, да, извините, поэтому я извинил это в своем carousel.js, но не изменился (для автовоспроизведения это, наконец, настоящая проблема, и карусель работал без этого js-файла:/Но я полагаю, что мне это понадобится для автовоспроизведение) –

Смежные вопросы