Карусель bootstrap из рубина на рельсах

Я пытаюсь загрузить свои изображения в карусель с помощью Ruby. Однако, когда я ввожу определенный код, я получаю нежелательное изображение. Код ниже.

<div class = "page-wrap">
  <h1> Bikes</h1>
  <h2> The best source for bikes!</h2>

  <div id = "carousel-example-generic" class = "carousel slide" data-ride = "carousel">

  <!-- Indicators -->
  <ol class = "carousel-indicators">
    <% @products.each_with_index do |product| %>
      <li data-target = "#myCarousel" data-slide-to = "<%= 'product' %>" class = "<%= product == 0 ? 'active' : '' %>"></li>
    <% end %>
  </ol>

  <!-- Wrapper for slides -->
  <div class = "carousel-inner" id = "carousel_images">
    <% @products.each_with_index do |product| %>
      <div class = "item<%= " active" if product == @products.first %>">
        <% if product.image_url.present? %>
          <%= image_tag ("mbx.jpg") %>
        <% end %>
        <div class = "carousel-caption">
          <%= product.name %>
        </div>
      </div>

      <div class = "item">
        <% if product.image_url.present? %>
          <%= image_tag (product.image_url) %>
        <% end %>
        <div class = "carousel-caption">
          <%= product.name %>
        </div>
      </div>
    <% end %>
  </div>

  <!-- Controls -->
  <a class = "carousel-control-prev" href = "#carouselExampleIndicators" role = "button" data-slide = "prev">
    <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
    <span class = "sr-only">Previous</span>
  </a>

  <a class = "carousel-control-next" href = "#carouselExampleIndicators" role = "button" data-slide = "next">
    <span class = "carousel-control-next-icon" aria-hidden = "true"></span>
    <span class = "sr-only">Next</span>
  </a>
</div>

Он показывает продукты, когда я их вставляю напрямую (mbx.jpg). Однако они будут отображаться не в виде карусели, а в статике.

Кроме того, это код, который появляется для нежелательного изображения в инструментах разработчика, и я не знаю, как его изменить. Я уже добавил продукты, использующие http: // локальный: 3000 / продукты / новый, и, по-видимому, у меня уже есть 7, но я не могу показать ни один из них.

Изображение здесь

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
1 013
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Убедитесь, что вы следуете всем Рекомендации по загрузке. Вот как это должно выглядеть:

<div id = "carouselExampleSlidesOnly" class = "carousel slide" data-ride = "carousel">
  <div class = "carousel-inner">
    <div class = "carousel-item active">
      <img class = "d-block w-100" src = ".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt = "First slide">
    </div>
    <div class = "carousel-item">
      <img class = "d-block w-100" src = ".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt = "Second slide">
    </div>
    <div class = "carousel-item">
      <img class = "d-block w-100" src = ".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt = "Third slide">
    </div>
  </div>
</div>

Похоже, вам следует переименовать свой класс item в carousel-item.

Другие вопросы по теме