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 introduction ・ Introduction of Bootstrap3 ・ Implementation of posting function ・ Implementation 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] [Rails] Implementation of image slide show using Bootstrap 3