Magento2にsliderを設置してみよう！-Swiper編-

##はじめに
初めまして、アユカです。
普段はWebデザインやフロントコーディングをしています。
Magento2のスライド設置に随分手こずりましたので備忘録となります。
Qiita初投稿！

##概要
今回は、トップページに使用するスライドを設置します。
スライドは、Magento管理画面のBlocksに作成します。

##sliderプラグインを用意する
今回は「[Swiper](http://idangero.us/swiper/)」というスライダープラグインを使用します。
demoも多数あり、使いやすいためリピートしてます！

###jsファイルの置き場
Mytheme_Module/web/js
に該当のjsをおきます。
今回使用したjsは「swiper.min.js」です。

##jQueryライブラリとプラグインを呼び出す
Magento2には、もともとjQeuryライブラリが読み込まれていますので、
特別用意は必要ありません。

Magento2でjsを使用するときは、以下のように
「jQueryを読み込んだ後に、プラグインを読み込んでね！」という指定が必要です。

###requirejs-config.jsを作成
こちらに上記の指定を書きます。

```js:requirejs-config.js
var config = {
  paths: {
    'swiperslider': 'Mytheme_Module/js/swiper.min',
	},
	shim: {
		'swiperslider': {
			deps: ['jquery']
		}
	}
};
```

▼▼▼　詳細　▼▼▼

```js
paths: {
    'swiperslider': 'Mytheme_Module/js/swiper.min',
	},
```
こちらに、プラグインのjsを置いたパスを記入します。

```js
	shim: {
		'swiperslider': {
			deps: ['jquery']
		}
	}
```
こちらは先述した「jQeuryを先に読み込んでね！」という指定です。

"swiperslider"の関数については任意で決めて大丈夫です！

###jsファイルの置き場
こちらのrequirejs-config.jsは
テーマ直下におきます。

##Sliderブロック作成
続いて、SliderのhtmlとjQueryを作成します。

###html
htmlはdemoのままを使用します。
(画像はbackgroundからimgに変更しています。)

```html
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="http://lorempixel.com/1000/1000/nightlife/1" alt=""></div>
      <div class="swiper-slide"><img src="http://lorempixel.com/1000/1000/nightlife/2" alt=""></div>
      <div class="swiper-slide"><img src="http://lorempixel.com/1000/1000/nightlife/3" alt=""></div>
      <div class="swiper-slide"><img src="http://lorempixel.com/1000/1000/nightlife/4" alt=""></div>
      <div class="swiper-slide"><img src="http://lorempixel.com/1000/1000/nightlife/5" alt=""></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-white"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
  </div>
```

###jQuery
続いて、jQueryは以下のように作成します。

```js

require(['jquery', 'swiperslider'], function($, Swiper){
  jQuery(document).ready(function(){
      var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      effect: 'fade',
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  });
});
```

▼▼▼　詳細　▼▼▼
はじめに、使用するライブラリを指定します。

```js
require(['jquery', 'swiperslider'], function($, Swiper)
```

プラグイン名やファイル名ではなく、
**requirejs-config.jsで指定した関数名を使用する**ことがポイントです。


###ここでハマった!!!!!
Swiperプラグインのみでしかまだjsを触っていないので、今回のみかもしれませんが、
はじめは以下のように指定していました。

```js
require(['jquery', 'swiperslider'], function($)
```

ですが、ずーっと
`Uncaught ReferenceError: Swiper is not defined`
というエラーを吐いていました。

jsはきちんと読み込まれているのに「Swiper」の関数がないと怒られました。

###これで解決！
functionの後に関数を書いてあげることで解決しました！

```js
require(['jquery', 'swiperslider'], function($, Swiper ←これ)
```

##できた！
無事スライドを設置することができました！
参考にさせていただいたページは以下です。ありがとうございましたm(__)m
※全部英語です

- [How to use jquery library in Magento 2?](https://magento.stackexchange.com/questions/97184/how-to-use-jquery-library-in-magento-2)
- [How add js and css on home page (slider) to Magento 2?](https://magento.stackexchange.com/questions/151309/how-add-js-and-css-on-home-page-slider-to-magento-2)
- [How to resolve Uncaught ReferenceError: jQuery is not defined(anonymous function) error magento 2?](https://www.rakeshjesadiya.com/how-to-resolve-uncaught-referenceerror-jquery-is-not-defined-anonymous-function-error-magento-2/)
- [How include the Swiper slider in Magento2?](https://magento.stackexchange.com/questions/230070/how-include-the-swiper-slider-in-magento2?noredirect=1&lq=1)