Cible

Après avoir utilisé chaque méthode Un diaporama est mis en œuvre en fonction du nombre d'images enregistrées.

- Bien que nous approchions de notre objectif, nous n'avons pas encore tout résolu. Nous le mettrons à jour dès qu'il pourra être résolu.

Environnement de développement

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

supposition

[Ruby on Rails] Fonction de prévisualisation de l'image dans le fichier refile C'est OK si la fonction de publication d'image est disponible.

Concernant bootstrap4, cet article était facile à comprendre. Utilisation de Bootstrap 4 avec l'application Rails

Consultez le site officiel

Carousel --Bootstrap 4.1 Japanese Reference

Cette fois dans ce Tentatives de mise en œuvre à l'aide de la méthode Avec indicateurs.

- Dès la conclusion, il y a un problème, nous le mettrons donc à jour dès qu'il pourra être résolu.

Modifier vue

`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>

Façon de penser

Puisque le site officiel décrit l'image directement, afin de se rapprocher de cet objectif La première feuille est spécifiée comme `<div class =" carousel-item active ">`. Par conséquent, le premier<% @post_images.first(1).each do |image| %>Entrer La deuxième feuille et les suivantes sont acquises à l'aide de drop (1).

Bien que ce soit correct si la partie indicateur est le nombre d'images, Cela nécessite également class = "active", donc La deuxième feuille et les suivantes sont acquises à l'aide de drop (1).

Punaise

1 Bien que l'affichage de l'indicateur et le flux de l'indicateur dans le diaporama soient corrects, Cliquez sur l'indicateur pour sélectionner à partir de la dernière image 2 .carousel-fade ne s'applique pas → (Après son déploiement sur Heroku, il a été appliqué en safari sur iPhone.)

Résumé

Si vous n'utilisez pas d'indicateur et de fondu de carrousel, je pense que cette méthode est appropriée. J'espère que cela vous aidera. De plus, s'il y a des améliorations, veuillez me le faire savoir.

référence

Comment utiliser et personnaliser Bootstrap4 Carousel Diaporama Bootstrap Partial on Rails

[Ruby on Rails] Le carrousel de bootstrap4 est implémenté sous forme de diaporama en utilisant chaque méthode.