[RUBY] [Rails] Implementation of image slide show using Bootstrap 3

Target

ezgif.com-video-to-gif.gif

Development environment

・ Ruby: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ OS: macOS Catalina

Premise

The following has been implemented.

Slim introductionIntroduction of Bootstrap3Implementation of posting functionImplementation of multiple image upload function

Implementation

1. Edit the view

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

[Explanation]

(1) Repeat the process of the image list registered in the book and assign an index.

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

(2) Set the image to be displayed on the first sheet.

This time, I'm setting an image with index 1.

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

③ Set the second and subsequent images.

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

2. Edit ʻapplication.scss`

application.scss


.carousel-image {
  width: 30%; //Set the width of the image for the slide
  margin: 0 auto; //Center image
}

Recommended Posts

[Rails] Implementation of image slide show using Bootstrap 3
[Rails] Implementation of image enlargement function using lightbox2
[Rails] Implementation of image preview function
[Ruby on Rails] Carousel of bootstrap4 is implemented as a slide show using each method.
[Rails 6] Implementation of inquiry function using Action Mailer
[Rails] Implementation of batch processing using whenever (gem)
[Rails] Implementation of PV number ranking using impressionist
[Rails] Implementation of multi-layer category function using ancestry "Preparation"
[Rails] Implementation of multi-layer category function using ancestry "seed"
[Rails] Implementation of category function
[Rails] Implementation of tutorial function
[Rails] Implementation of like function
[Rails] Implementation of multi-layer category function using ancestry "Editing form"
[Rails] Implementation of automatic address input using jpostal and jp_prefecture
[Rails] Implementation of multi-layer category function using ancestry "Creation form"
[Rails] Implementation of tagging function using intermediate table (without Gem)
[Rails] Implementation of user logic deletion
[Rails] Implementation of CSV import function
[Rails] About implementation of like function
[Rails] Implementation of user withdrawal function
[Rails] Implementation of CSV export function
Implementation of validation using regular expressions
[Rails] Implementation of many-to-many category functions
[Rails] Implementation of new registration function in wizard format using devise
[Rails] Implementation of coupon function (with automatic deletion function using batch processing)
[Rails] Implementation of tag function using acts-as-taggable-on and tag input completion function using tag-it
[Rails] Implementation of multi-layer category function using ancestry "I tried to make a window with Bootstrap 3"
[Android] Implementation of side-scrolling ListView using RecyclerView
Implementation of user authentication function using devise (2)
[Rails] I will explain the implementation procedure of the follow function using form_with.
Implementation of user authentication function using devise (1)
Rails [For beginners] Implementation of comment function
[Rails 6] Implementation of SNS (Twitter) sharing function
Implementation of tabs using TabLayout and ViewPager
Implementation of user authentication function using devise (3)
[Vue.js] Implementation of menu function Implementation version rails6
How to implement image posting using rails
[Ruby on rails] Implementation of like function
[Rails] Implementation of validation that maintains uniqueness
[Vue.js] Implementation of menu function Vue.js introduction rails6
Using Material Design for Bootstrap with Rails 5.2
Multiple image upload function using Rails Carrierwave
[Rails] Set validation for the search function using Rakuten API (from the implementation of Rakuten API)
Implementation of Ruby on Rails login function (Session)
[FCM] Implementation of message transmission using FCM + Spring boot
[Rails] Display of multi-layered data using select boxes
[Rails] Schedule management using Full Calendar Yesterday's implementation
[Rails] Implementation of retweet function in SNS application
[Nuxt / Rails] POST implementation using axios and devise_token_auth
Try similar search of Image Search using Java SDK [Search]
[Rails] Implementation of "notify notification in some way"
[Rails] Show avatars in posts using Active Storage
[Note] Summary of rails login function using devise ①
Rails Bootstrap introduced
Implementation of GKAccessPoint
Implementation of Google Sign-In using Google OAuth 2.0 authentication (server edition)
Ruby on Rails <2021> Implementation of simple login function (form_with)
Implementation of Ruby on Rails login function (devise edition)
[Ruby on Rails] Implementation of tagging function/tag filtering function
[Rails] When using ajax, be aware of "CSRF measures".
Rails6: Input the initial data of ActionText using seed