목표

개발 환경

전제

구현

1. 뷰 편집

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

【해설】

① 책에 등록되어 있는 화상 일람을 반복 처리해, index를 부여한다.

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

② 1장째에 표시하는 화상을 설정한다.

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

③ 2매째 이후의 화상을 설정한다.

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

2. application.scss 편집

.carousel-image {
  width: 30%; // スライドに対する画像の幅を設定
  margin: 0 auto; // 画像を中央に配置
}