ブートストラップカルーセルが遷移後にナビゲーションバーを無効にする

Question

私は自分のサイトのバックグラウンドとしてレール5にブートストラップ4カルーセルを使用しています。私は、ページの異なる部分にリンクする丸薬を備えたナビゲーションバーを持っています。最初のイメージが次のイメージに移行するまで、ページが読み込まれるとすべてが機能します。ナビゲーションバーの丸薬が消え、リンクをクリックすると、ページの特定の部分に移動することはありません。

これは、画像がトランジションされるときに、背景画像だけでなくコンテンツ全体（コンテンツが同じでも）が遷移し、最初のページのコンテンツにリンクしているためです。 （そして "新しい" コンテンツへのリンクを再ように見えることはできません。）ここで

は私のコードです：

index.html.erb

<% image_array = [] %> <!--Array of image paths, i.e. [image_path(''), image_path('')]--> 
<% @images.each do |image| %> 
    <% image.slice! 'app/assets/images/' %> 
    <% image_array.push(image_path(image)) %> 
<% end %> 

<div id="carousel-images" class="carousel slide" data-ride="carousel"> 
    <div class="carousel-inner" role="listbox"> 
     <div class="carousel-item active" style="background: url(<%= image_path image_array[0] %>) 
      no-repeat center center fixed; 
      background-position: 50% 0; 
      height: 100%; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      background-size: cover; 
      -o-background-size: cover;"> 
      <div class="transparent"></div> 
      <%= render 'content' %> 
     </div> 


     <% image_array.delete_at(0) %> 

     <% image_array.each do |image| %> 
      <div class="carousel-item" style="background: url(<%= image_path image %>) 
      no-repeat center center fixed; 
      background-position: 50% 0; 
      height: 100%; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      background-size: cover; 
      -o-background-size: cover;"> 
      <div class="transparent"></div> 
       <%= render 'content' %> 
      </div> 
     <% end %> 
    </div> 
</div> 

welcome_controller.rb

（application.html.erbからレンダリングされ、図示されていない）

class WelcomeController < ApplicationController 
    def index 
    @images = Dir.glob("app/assets/images/*") 
    end 
end 

_navigationbar.html.erb

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse"> 
    <!-- Brand --> 
    <!-- <a class="navbar-brand" href="#">League Builders</a>--> 

    <!-- Links --> 
    <div id="myNavbar"> 
     <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> 
     <div class="collapse navbar-toggleable-md" id="navbarResponsive"> 
      <ul class="nav nav-pills navbar-nav" id="nav-colors"> 
       <li class="nav-item"><a class="nav-link" href="#home"><b>League</b><i>Builders</i></a></li> 
       <li class="nav-item"><a class="nav-link" href="#about">About</a></li> 
       <li class="nav-item"><a class="nav-link" href="#features">Features</a></li> 
       <li class="nav-item"><a class="nav-link" href="#contact">Contact Us</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

Answer 1

私は、それが毎回コンテンツをレンダリングするように、カルーセル部分の中にコンテンツを持っていたからだと分かりました。私はコンテンツを取り出したが、私がそれをしたときに背景が現れなかった。背景の100％カバーが内容に当てはまると思われるので、背景画像を特定のピクセルの高さに調整して、画面全体を塗りつぶしただけです。 （これは面倒な方法でしたし、もっと良い方法があるかどうかはわかりませんが、これはあちこちで遊んだ後に働きました）