ブートストラップRails Appの一部としてカルーセルが動かない

私はRailsアプリケーションでBootstrapカルーセルを使用したいと思います。 JQuery、Bootstrap、JSがすべてロードされ、動作中のデータベースが設定されます。だから私はカルーセルのコードに間違いがあるのだろうかと思っています。最初の画像は表示されますが、変更されていないので、矢印をクリックしても次の画像に移動しません。また、ブートストラップRails Appの一部としてカルーセルが動かない

<% @products.each_with_index do |product, index| %> 
    <div class="item <%= 'active' if index == 0 %>"> 
     <%= image_tag(product.image_url) %> 
     <div class="carousel-caption"> 
     <%= product.name %> 
     </div> 
    </div> 
<% end %>

：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <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> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <% @products.each do |product| %> 
 
\t  <div class="item<%= " active" if product == @products.first %>"> 
 
\t  <%= image_tag(product.image_url) %> 
 
\t  <div class="carousel-caption"> 
 
\t   <%= product.name %> 
 
\t  </div> 
 
\t  </div> 
 
\t <% end %> 
 
\t ... 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" 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-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div>

出典

2017-09-07 Cherian Grundmann

ブートストラップカルーセルイニシャライザを $（document）.on（ 'turbolinks：load'、function（）{ ... }ブートストラップファイルをロードした後の？ –

あなたのJSは、なぜそれはあなたがあなたのapplication.jsにブートストラップJSを含めるか、単にレイアウト

にそれを含めることを確認してください

が動作していないことをロードされていません

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

出典

2017-09-08 11:46:45 Kimooz

typo ...それはそれを解決した！ありがとう！ –

何も必ずしもエラーであるとして立っていないが、動作します、私は以前に使用してきたアプローチは、このようなわずかに異なるアプローチをとりますブートストラップJSファイルがロードされていることをダブルチェックしましたか？

編集：JSがまだ機能していないという事実に基づいて、JS資産を適切にロードするアセットパイプラインに潜在的に問題があると予想します。ブートストラップをCDNに含めることができますが、gem 'bootstrap-sass'をgemファイルに追加し、bundle installを追加することをお勧めします。これは、宝石を経由して、ブートストラップを追加します（そして、それはRailsのアプローチのより多くのだ）、その後、あなたはあなたのapplication.jsファイルに向かうと（あなたがjquery_ujsを持っていると仮定して）このように見えるようにロード順序を更新します：

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

出典

2017-09-08 01:43:10

ちょうど私がブートストラップをロードしたところに投稿されました。あなたのコードは私の仕事ではあまり機能しません。最初の製品のイメージさえ表示されません。 –

オーケーこれが私がブートストラップをロードする場所であることを確かめるために、これまでのところそれは問題を引き起こしませんでしたが、これまではnavbarのためだけに使っていました。

<head> 
 
    <title>Rails1</title> 
 
    <%= csrf_meta_tags %> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
 

 
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 
 
    <script scr="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> 
 
    </script> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
    
 
    </head>

出典

2017-09-08 08:47:06

ブートストラップRails Appの一部としてカルーセルが動かない

答えて

関連する問題