Swiperを使ってスライダー機能の実装

#Swiper

##Swiperとは
jQuery 不要でレスポンシブ及びタッチデバイス（スマホやタブレット）対応のスライダープラグイン Swiperを使うことで簡単にスライダーを実装することができる。

[Swiper公式サイト https://swiperjs.com/]

##Swiperのダウンロード方法
Swiperのダウンロードは様々あるが今回はnpmでSwiperをインストールするものとする。

1.　Swiperのインストール

$ npm install swiper

コンソールでswiperをインストールする

2.　node_modulesをassetsに追加

config/initializers/assets.rb

Rails.application.config.assets.paths << Rails.root.join('node_modules')

node_modulesをassetsに追加するためにconfig/initializers/assets.rbに上記を記入

３. Swiperをアプリに反映させる

app/assets/javascripts/application.js

//= require swiper/swiper-bundle.js

jsファイルにSwiperのコードを記述したら反映できるようにjsファイルに上記を記述する。

##Swiperを記述する
Swiper公式リファレンスに沿って記述していく

<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

各スライド(Slide1,Slide2)に画像を貼ることでスライダーになる

##Swiperの各オプション
縦スライドや自動スクロールなど様々なスライドオプションはjsファイルに記述することによって
しようを変えることができる

[参考　https://garigaricode.com/swiper/]

今回はslim形式で自動スクロールを実装する

<!-- Slider main container -->
.swiper-container
  <!-- Additional required wrapper -->
  .swiper-wrapper
    <!-- Slides -->
    .swiper-slide
      Slide 1  （ここには画像をはる）
    .swiper-slide
      Slide 2　（ここには画像をはる）
    .swiper-slide
      Slide 3　（ここには画像をはる）
    .swiper-slide
      Slide 4　（ここには画像をはる）
  <!-- If we need pagination -->
  .swiper-pagination

  <!-- If we need navigation buttons -->
  .swiper-button-prev
  .swiper-button-next

  <!-- If we need scrollbar -->
  .swiper-scrollbar

var mySwiper = new Swiper('.swiper-container', {
	autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
        }
});

基本的に上のオプションのサイトをみながらコードを記述すると実装することができる。