More than 3 years have passed since last update.

Rails 画像を自動でスライドさせる　【Swiper】

Last updated at 2020-10-22Posted at 2020-10-22

##やりたい事
よくあるホームページで、画像が自動でスライドしていくのがあると思います。
あれを今回「Swiper」を使い簡単に実装しようと思います。
SwiperはダウンロードとCDNがあるので今回はCDNの方で実装を行います。

##実装
こちらからコピーして読み込む。https://cdnjs.com/libraries/Swiper


https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/js/swiper.min.js

https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/css/swiper.css

###CDNで読み込む例

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/css/swiper.min.css">
</head>
<body>
〜中略〜
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/js/swiper.min.js"></script>
</body>

###SwiperのHTMLの基本の記述

<div class="swiper-container"> 
   <!-- メイン表示部分 --> 
   <div class="swiper-wrapper"> 
     <!-- 各スライド -->
     <div class="swiper-slide"><img src="/assets/01.jpg" alt style="width: 100%; height: 100%;"></div>
     <div class="swiper-slide"><img src="/assets/02.jpg" alt style="width: 100%; height: 100%;"></div>
     <div class="swiper-slide"><img src="/assets/03.jpg" alt style="width: 100%; height: 100%;"></div>
   </div>
   <!-- ナビケーション -->
   <div class="swiper-button-prev"></div>
   <div class="swiper-button-next"></div>
   <div class="swiper-pagination"></div>
</div>

###CSSでサイズ調整
全体を囲う<div class="swiper-container"> にCSSで調整する事で、スライダーをサイズを設定する。

.swiper-container{
   width: 1000px;
   height: 400px;
}

###Swiperの基本設定のJavaScript記述

<script>
    var mySwiper = new Swiper('.swiper-container');
</script>

これで一応、最低限の機能で動くスライダーの完成です。
ただし、本当に最低限の機能「イメージを左右にマウスなどでドラックすれば動く」という状態であり、左右の矢印ナビゲーションや、自動再生などは機能しない状態。

###Swiperのオプションを追加
オプションを追加していきます。オプション色々ありますが今回はこれでやります。


<script>
    var mySwiper = new Swiper ('.swiper-container', {
      loop: true,         //画像のループ
      effect: 'slide',    //切り替わるときのアニメーション
      speed: 3000,        //画像の切替スピード
      autoplay: {         //自動で動かす
        delay: 3000,
        disableOnInteraction: true
      },
      pagination: {        //ページネーション
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
      },
      navigation: {        //ナビケーション
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
</script>

###実装完了
最終的に下記の様になります。

<!DOCTYPE html>
<html>
  <head>
    <title>Mailers</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application' %>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/css/swiper.min.css">
  </head>
  <body>
    <div class="swiper-container">
    <!-- メイン表示部分 -->
      <div class="swiper-wrapper">
      <!-- 各スライド -->
        <div class="swiper-slide"><img src="/assets/01.jpg" alt style="width: 100%; height: 100%;"></div>
        <div class="swiper-slide"><img src="/assets/02.jpg" alt style="width: 100%; height: 100%;"></div>
        <div class="swiper-slide"><img src="/assets/03.jpg" alt style="width: 100%; height: 100%;"></div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-pagination"></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.3.7/js/swiper.min.js"></script>
    <script>
        var mySwiper = new Swiper ('.swiper-container', {
          loop: true,        //画像のループ
          effect: 'slide',   //切り替わるときのアニメーション
          speed: 3000,       //画像の切替スピード
          autoplay: {        //自動で動かす
            delay: 3000,
            disableOnInteraction: true
          },
          pagination: {      //ページネーション
            el: '.swiper-pagination',
            type: 'bullets',
            clickable: true
          },
          navigation: {      //ナビケーション
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
    </script>
  </body>
</html>

##おわり
お疲れ様でした。Railsであれば実装完了をコピペすれば動くはずです。
参考リンクにオプションの細かな内容が記載されていますので参考にしてみて下さい。
https://garigaricode.com/swiper/

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Rails 画像を自動でスライドさせる 【Swiper】

Rails 画像を自動でスライドさせる　【Swiper】