[RUBY] [Rails] Implémentation du diaporama d'images à l'aide de Bootstrap 3

Cible

ezgif.com-video-to-gif.gif

Environnement de développement

・ Rubis: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ Système d'exploitation: macOS Catalina

supposition

Ce qui suit a été mis en œuvre.

・ Présentation mince ・ Introduction de Bootstrap 3 ・ Mise en œuvre de la fonction de publication ・ Mise en œuvre de la fonction de téléchargement d'images multiples

la mise en oeuvre

1. Modifier la vue

slim:books/show.html.slim


/Postscript
.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
        |Vers l'avant
    a.right.carousel-control href='#sampleCarousel' role='button' data-slide='next'
      span.glyphicon.glyphicon-chevron-right aria-hidden='true'
      span.sr-only
        |prochain

[Explication]

(1) Traitez à plusieurs reprises la liste d'images enregistrée dans le livre et attribuez un index.

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

(2) Définissez l'image à afficher sur la première feuille.

Cette fois, l'image avec l'index «1» est définie.

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

③ Réglez la deuxième image et les suivantes.

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

2. Editez ʻapplication.scss`

application.scss


.carousel-image {
  width: 30%; //Définir la largeur de l'image pour la diapositive
  margin: 0 auto; //Image centrale
}

Recommended Posts

[Rails] Implémentation du diaporama d'images à l'aide de Bootstrap 3
[Rails] Implémentation de la fonction d'agrandissement d'image à l'aide de lightbox2
[Rails] Implémentation de la fonction de prévisualisation d'image
[Ruby on Rails] Le carrousel de bootstrap4 est implémenté sous forme de diaporama en utilisant chaque méthode.
[Rails] Mise en œuvre du classement des nombres PV à l'aide de l'impressionniste
[Rails] Implémentation de la fonction de catégorie multicouche en utilisant l'ascendance "Préparation"
[Rails] Implémentation de la fonction de catégorie multicouche à l'aide de l'ascendance "seed edition"
[Rails] Implémentation de la fonction de catégorie
[Rails] Implémentation de la fonction tutoriel
[Rails] Implémentation d'une fonction similaire
[Rails] Implémentation de la fonction de catégorie multicouche en utilisant l'ascendance "Edit Form Edition"
[Rails] Implémentation de la saisie d'adresse automatique avec jpostal et jp_prefecture
[Rails] Implémentation de la fonction de catégorie multicouche à l'aide de l'ascendance "Formulaire de création"
[Rails] Implémentation de la suppression logique utilisateur
[Rails] Implémentation de la fonction d'importation CSV
[Rails] À propos de la mise en œuvre de la fonction similaire
[Rails] Implémentation de la fonction de retrait utilisateur
[Rails] Implémentation de la fonction d'exportation CSV
Implémentation de la validation à l'aide d'expressions régulières
[Rails] Implémentation de fonctions de catégorie plusieurs à plusieurs
[Rails] Implémentation d'une nouvelle fonction d'enregistrement au format assistant à l'aide de devise
[Rails] Implémentation de la fonction coupon (avec fonction de suppression automatique par traitement par lots)
[Rails] Implémentation de la fonction de balise à l'aide de la fonction agit-as-taggable-on et de la fonction de complétion d'entrée de balise à l'aide de tag-it
[Rails] Implémentation de la fonction de catégorie multicouche en utilisant l'ascendance "J'ai essayé de créer une fenêtre avec Bootstrap 3"
[Android] Implémentation de ListView à défilement latéral à l'aide de RecyclerView
Implémentation de la fonction d'authentification des utilisateurs à l'aide de devise (2)
[Rails] Je vais expliquer la procédure d'implémentation de la fonction follow en utilisant form_with.
Implémentation de la fonction d'authentification des utilisateurs à l'aide de devise (1)
Rails [Pour les débutants] Implémentation de la fonction de commentaire
Implémentation des onglets à l'aide de TabLayout et ViewPager
Implémentation de la fonction d'authentification des utilisateurs à l'aide de devise (3)
Pour implémenter la publication d'images à l'aide de rails
[Ruby on rails] Implémentation d'une fonction similaire
[Rails] Mise en œuvre de la validation qui maintient l'unicité
Implémentation de la fonction de connexion Ruby on Rails (Session)
[FCM] Implémentation de la transmission de messages en utilisant FCM + Spring boot
[Rails] Affichage des données de structure à plusieurs niveaux à l'aide de la boîte de sélection
[Rails] Gestion des horaires à l'aide du calendrier complet Implémentation d'hier
[Nuxt / Rails] Implémentation POSTed en utilisant axios et devise_token_auth
Essayez une recherche similaire de recherche d'images à l'aide du SDK Java [Recherche]
[Rails] Mise en œuvre de "notifier la notification d'une manière ou d'une autre"
[Rails] Afficher les avatars dans les messages à l'aide du stockage actif
Mise en œuvre de Google Sign-In à l'aide de l'authentification Google OAuth 2.0 (édition serveur)
Implémentation de la fonction de connexion Ruby on Rails (édition de devise)
[Rails] Lorsque vous utilisez ajax, faites attention aux "mesures CSRF".
Rails6: saisissez les données initiales d'ActionText à l'aide de seed