0

我使用 rails 5 中的 bootstrap 4 carousel 作为我网站的背景。我有一个带有药丸的导航栏，它链接到页面的不同部分。页面加载时一切正常，直到第一个图像过渡到下一个。然后导航栏上的药丸消失了，当我单击链接时，它们不会导航到它应该导航到页面的特定部分。

我认为这可能是因为当图像转换时，它不仅会转换背景图像，还会转换整个内容（即使内容保持不变），并且它仍然链接到初始页面的内容。（因此它似乎无法重新链接到“新”内容。）

这是我的代码：

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>

欢迎控制器.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>
4

1 回答 1

0

我发现这是因为我在轮播部分中有内容，所以它每次都在渲染内容。我取出了内容，但是当我这样做时，背景并没有出现。似乎背景的 100% 覆盖适用于它将包含的内容，所以我只是将背景图像调整为特定的像素高度，以便它可以填满整个屏幕。（这是一种乏味的方法，我不确定是否有更好的方法，但在玩过它之后就奏效了。）

于 2017-01-15T20:23:30.963 回答