Bootstrap Carousel отключает навигационную панель после перехода

Question

Я использую автозагрузку 4 карусели в рельсах 5 в качестве фона моего сайта. У меня есть панель навигации с таблетками, которая связывается с различными частями страницы. Все работает, когда страница загружается, пока первое изображение не перейдет к следующему. Затем таблетки на панели навигации исчезают, и когда я нажимаю ссылки, они не переходят к определенной части страницы, которая должна быть.

Я думаю, что это может быть связано с тем, что при переходе изображения он переходит не только к фоновому изображению, но и ко всему содержимому (хотя контент остается тем же), и он все еще связывается с содержимым начальной страницы , (И поэтому он не может показаться повторно ссылку на "новый" контент.)

Вот мой код:

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

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

_navigationbar.html.erb (оказанной от application.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% -ная обложка фона относится к содержанию, которое она будет содержать, поэтому я только скорректировал фоновое изображение на определенную высоту пикселя, чтобы он заполнил весь экран. (Это был утомительный метод, и я не уверен, есть ли лучший способ, но это сработало после игры с ним.)