Ziel

Nach jeder Methode Eine Diashow wird entsprechend der Anzahl der registrierten Bilder implementiert.

- Obwohl wir uns unserem Ziel nähern, haben wir noch nicht alles gelöst. Wir werden es aktualisieren, sobald es behoben werden kann.

Entwicklungsumgebung

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

Annahme

[Ruby on Rails] Post-Bildvorschau-Funktion in Refile Es ist in Ordnung, wenn die Bildpostfunktion verfügbar ist.

In Bezug auf bootstrap4 war dieser Artikel leicht zu verstehen. Verwenden von Bootstrap 4 mit der Rails App

Überprüfen Sie die offizielle Website

Karussell - Bootstrap 4.1 Japanische Referenz

Diesmal in diesem Versuche, mit der With-Indikatoren-Methode zu implementieren.

- Abschließend gibt es ein Problem, daher werden wir es aktualisieren, sobald es behoben werden kann.

Ansicht bearbeiten

`app/views/`


<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="3000">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <% @post_images.drop(1).count.times do |index| %>
      <li data-target="#carouselExampleIndicators" data-slide-to="#{index}"></li>
    <% end %>
  </ol>
  
  <div class="carousel-inner">
    <div class="carousel-item active">
      <% @post_images.first(1).each do |image| %>
        <%= attachment_image_tag image, :image, class: "carousel_image"  %>
      <% end %>
    </div> 
    <% @post_images.drop(1).each do |image| %>
      <div class="carousel-item">
        <%= attachment_image_tag image, :image, class: "carousel_image" %>
      </div>
    <% end %>
  </div>
  <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>

Denkweise

Da die offizielle Website das Bild direkt beschreibt, um diesem Ziel näher zu kommen Das erste Stück wird als `<div class =" carousel-item active ">` angegeben. Daher der erste<% @post_images.first(1).each do |image| %>Reinkommen Das zweite und die folgenden Blätter werden mit drop (1) erfasst.

Obwohl es in Ordnung ist, wenn der Indikatorteil die Anzahl der Bilder ist, Dies erfordert auch class = "active" Das zweite und die folgenden Blätter werden mit drop (1) erfasst.

Fehler

1 Obwohl die Indikatoranzeige und der Indikatorfluss in der Diashow korrekt sind, Klicken Sie auf die Anzeige, um aus dem letzten Bild auszuwählen 2. Karussell-Fade gilt nicht → (Nach der Bereitstellung auf Heroku wurde es in einer Safari auf dem iPhone angewendet.)

Zusammenfassung

Wenn Sie keinen Indikator und kein Karussell-Fade verwenden, ist diese Methode meiner Meinung nach geeignet. Ich hoffe, Sie finden es hilfreich. Wenn es Verbesserungen gibt, lassen Sie es mich bitte wissen.

Referenz

Verwenden und Anpassen des Bootstrap4-Karussells Bootstrap-Diashow Partial on Rails

[Ruby on Rails] Das Karussell von bootstrap4 wird mit jeder Methode als Diashow implementiert.