[英]Bootstrap Carousel not moving as part of a Rails App
我想在我的Rails應用程序中使用Bootstrap輪播。 jQuery，Bootstrap和JS均已加載，並建立了工作數據庫。 所以我想知道我的輪播代碼中是否有錯誤。 顯示第一個圖像，但它沒有變化，單擊箭頭並不能使其移到下一個圖像。
<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| %> <div class="item<%= " active" if product == @products.first %>"> <%= image_tag(product.image_url) %> <div class="carousel-caption"> <%= product.name %> </div> </div> <% end %> ... </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>
沒有什么可以肯定地是一個錯誤，但是我之前使用的有效方法采用的方法略有不同，如下所示：
<% @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 %>
另外，您是否再次檢查是否已加載Bootstrap JS文件？
編輯：基於JS仍無法運行的事實，我希望資產管道正確加載JS資產可能是一個問題。 雖然可以通過CDN包含引導程序，但我建議您在gem文件中添加gem 'bootstrap-sass'並bundle install 。 這將通過Gem添加引導程序（這更像是Rails的方法），然后您將進入application.js文件並更新加載順序，如下所示（假設您有jquery_ujs）：
//= require jquery
//= require bootstrap
//= require jquery_ujs
//= require turbolinks
//= require_tree .
好的，只是要確保這是我加載引導程序的地方，到目前為止，它沒有引起任何問題，但到目前為止，我僅將其用於導航欄。
<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>
您的JS未加載，為什么它不起作用
確保在application.js中包含bootstrap js或僅將其包含在布局中
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
在Rails 4應用中將圖像動態添加到Bootstrap Carousel
[英]Dynamically Adding images to Bootstrap Carousel in Rails 4 app
Simple Bootstrap 4 Carousel，下一張幻燈片的一部分靠近主要輪播項目
[英]Simple Bootstrap 4 Carousel with a part of the next slide near the main carousel item
無法使用 Webpacker 在 Ruby on Rails 6 中調用 Bootstrap4 $('.carousel').carousel
[英]Cannot call Bootstrap4 $('.carousel').carousel in Ruby on Rails 6 using Webpacker
為什么我的Bootstrap Carousel沒有從第二張幻燈片中移動？
[英]Why is my Bootstrap Carousel not moving from the second slide?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.