Bootstrap карусель не работает рельсы

я пытался интегрировать карусель Bootstrap в моем рубине применения рельсов, поэтому я сделал этот вид:Bootstrap карусель не работает рельсы

<head> 
</head> 
    <body> 
<div id="carousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel" data-slide-to="1" ></li> 
     <!--<li data-target="#carousel-example-generic" data-slide-to="2"></li>--> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
     <img src="<%= image_url('lol.jpg')%>" alt="Leagues Of Legends"> 
     </div> 
     <div class="item"> 
     <img src="<%= image_url('SC2.jpg')%>" alt="Starcraft II"> 
     </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span > 
    </a> 
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div> 
    </body>

Он отображает карусель, с моим первым изображением и все.

Проблема заключается в том, что ничего не работает: кнопки предыдущая, следующая кнопка и даже маленькие точки ничего не делает при нажатии на

Я не знаю, если это связано с моим кодом (сомневаюсь подумал, что я испытал много других и все тот же) или на рельсы ...

Любая помощь приветствуется!

EDIT

это мой активы/JavaScript/application.js файл:

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require bootstrap 
//= require bootstrap-sprockets 
//= require_tree .

источник

2015-10-06 Vroenguard

Вы уверены, что уже загрузили загрузочный javascript-файл? –

@SaiqulHaq Не уверен, что вы имеете в виду, но я добавил «bootstrap-sprockets» импорта и импортировал «bootstrap» (с помощью @) на мой aplication.css.sass, я пропустил что-нибудь? – Vroenguard

отредактируйте файл app/assets/javascripts/application.js , затем добавьте // = требуется jquery // = require bootstrap-sprockets; Сначала обратитесь к документам, https://github.com/twbs/bootstrap-sass –

Вы должны выполнить команду Javascript и JQuery в вашем коде для этой карусели, чтобы работать.

В конце вашего HTML-файла, добавьте этот (он может быть между DIV и телом)

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<script> 
    $(document).ready(function(){ 
    $('#mycarousel').carousel(); 
    }); 
</script>

Это следует сделать трюк. Вы также можете поместить этот код на части и загрузить его на макет приложения.

источник

2017-01-04 19:35:16

Bootstrap карусель не работает рельсы

ответ

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