【Rails5】「Swiper」を使って画面幅いっぱいのスライダーを実装する

2019年12月22日 2019年12月22日

まんぞー

この記事でわかる事

Railsで作ったアプリに画面幅いっぱいのスライダーを実装する方法

完成イメージ

「Swiper」というJavaScriptのプラグインを使えば、こんな感じのスライダーを超簡単に実装する事ができます。

開発環境

Ruby: 2.6.3
Rails: 5.2.4

実装までの手順

パッと見で何となくイメージはつくと思うので、Swiperがどんなものなのかについての説明は省きます。気になる方は公式サイトのドキュメントを見てください。

ここからは早速手を動かしていきましょう。

Swiperを読み込む

Swiperを自身のアプリに読み込む方法としては

ファイルを直接ダウンロードして配置する
CDN経由で読み込む

の2通りがありますが、今回はCDN経由でサクッと実装していきたいと思います。

# app/views/layouts/application.html.erb

<head>
...

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

...
</head>

アプリの<head>タグ内に上の2行を記述します。下準備はこれで完了。

viewファイルをいじる

次に、スライダーを実装したいviewファイルをいじっていきます。

# app/views/hoge/xxxxxx.html.erb

...

<div class="swiper-container">
  <h1>文字を入れたい場合は文字を入れる。</h1>
  <div class="swiper-wrapper">
    <div class="swiper-slide">
       <%= image_tag '画像ファイルの名前'%>
    </div>
    <div class="swiper-slide">
      <%= image_tag '画像ファイルの名前'%>
    </div>
    <div class="swiper-slide">
      <%= image_tag '画像ファイルの名前'%>
    </div>
  </div>
</div>

...

<script>
  let swipeOption = {
    loop: true,
    effect: 'fade',
    autoplay: {
      delay: 1500,
      disableOnInteraction: false,
    },
    speed: 2000,
  }
  new Swiper('.swiper-container', swipeOption);
</script>

...

script内のオプションについては人によって希望の値が違うと思うので、公式のドキュメントなどを参考にいじってみると良いでしょう。

今回は

loop: 繰り返し再生するかどうか
effect: どんな効果を付けるか
autoplay: 自動で画像を切り替えるか
speed: どれくらいの速さで切り替えるか

といった設定を行っています。

css（scss）ファイルをいじる

最後に、css（scss）ファイルをいじって見栄えを整えましょう。

# app/assets/stylesheets/hoge/xxxx.scss

...

.swiper-container {
  
  h1 {
    position: absolute;
    margin: 0;
    padding: 0;
    color: white;
    font-weight: bold;
    font-size: 6vw;
    font-family: Quicksand, sans-serif;
    text-shadow: black 1px 1px 0px, black -1px 1px 0px,
                     black 1px -1px 0px, black -1px -1px 0px;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 2; 
  }
  
  img {
    width: 100%;
  }
}

...

「.swiper-container」内のimgをwidth:100%にする事で画面幅いっぱいに画像が表示されるようにしてあります。