[RUBY] [Rails] Implementierung einer Bild-Diashow mit Bootstrap 3

Ziel

Entwicklungsumgebung

・ Ruby: 2.5.7 Schienen: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Betriebssystem: macOS Catalina

Annahme

Folgendes wurde implementiert.

・ Schlanke Einführung ・ Einführung von Bootstrap 3 ・ Implementierung der Posting-Funktion ・ Implementierung der Funktion zum Hochladen mehrerer Bilder

Implementierung

1. Ansicht bearbeiten

slim:books/show.html.slim

/Nachtrag
.row
  #sampleCarousel.carousel.slide data-ride='carousel'
    ol.carousel-indicators
      li.active data-target='#sampleCarousel' data-slide-to='0'
      li data-target='#sampleCarousel' data-slide-to='1'
      li data-target='#sampleCarousel' data-slide-to='2'
    .carousel-inner role='listbox'
      - @book.images.each.with_index(1) do |image, index|
        - if index == 1
          .item.active
            = image_tag image.to_s, class: 'img-responsive img-rounded carousel-image'
        - else
          .item
            = image_tag image.to_s, class: 'img-responsive img-rounded carousel-image'
    a.left.carousel-control href='#sampleCarousel' role='button' data-slide='prev'
      span.glyphicon.glyphicon-chevron-left aria-hidden='true'
      span.sr-only
        |Nach vorne
    a.right.carousel-control href='#sampleCarousel' role='button' data-slide='next'
      span.glyphicon.glyphicon-chevron-right aria-hidden='true'
      span.sr-only
        |Nächster

[Erläuterung]

(1) Verarbeiten Sie die im Buch registrierte Bildliste wiederholt und weisen Sie einen Index zu.

- @book.images.each.with_index(1) do |image, index|

(2) Stellen Sie das Bild ein, das auf dem ersten Blatt angezeigt werden soll.

Dieses Mal wird das Bild mit dem Index "1" gesetzt.

- if index == 1
  .item.active
    = image_tag image.to_s, class: 'carousel-image'

③ Stellen Sie das zweite und die nachfolgenden Bilder ein.

- else
  .item
    = image_tag image.to_s, class: 'carousel-image'

2. Bearbeiten Sie application.scss

application.scss

.carousel-image {
  width: 30%; //Stellen Sie die Breite des Bildes für die Folie ein
  margin: 0 auto; //Bild zentrieren
}