Bootstrap Carousel Disables Navigation Bar After Transition - ruby-on-rails

Question

I'm using the bootstrap 4 carousel in rails 5 as a background of my site. I have a navigation bar with pills, which links to different parts of the page. Everything works when the page loads until the first image transitions to the next one. Then the pills on the navigation bar disappear and when I click the links they don't navigate to the specific part of the page that it should.
I think this might be due to the fact that when the image transitions it transitions not just the background image, but the whole content too (even though the content remains the same), and it's still linking to the initial page's content. (And so it can't seem to re-link to the "new" content.)
Here is my code:
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 (rendered from application.html.erb, not shown)
<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

I figured out that it was because I had the content inside of the carousel part, such that it was rendering the content every time. I took out the content, but when I did that the background didn't show up. It seems that the 100% cover of the background applies to the content that it would contain, so I just adjusted the background image to a specific pixel height so that it would fill the whole screen. (This was a tedious method and I'm not sure if there is a better way, but this worked after playing around with it.)