webpack環境でjQueryプラグインslick.jsを使う


webpackでjQueryとslick.carouselとjQueryが使えるようにします:fist_tone3:

```package.json
{
  "dependencies": {
    "jquery": "^3.4.1",
    "slick-carousel": "^1.8.1"
  }
}
```


```webpack.config.babel.js

plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
    new MiniCssExtractPlugin({
      filename: forMentor
        ? 'sample/page-coding/css/[name].css'
        : 'css/[name].css'
    }),

```




### slick.js公式ページでSCSS(もしくはCSS)ファイルをダウンロード

![スクリーンショット 2019-12-12 10.40.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/446210/aaf8145d-5416-ccc7-e4cd-8b3436b91cb3.png)

右上の**`get it now`**から

![スクリーンショット 2019-12-12 10.40.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/446210/80c676ba-1c26-ffc8-6faf-6623381fda95.png)

**`Download Now`**にてダウンロード。
`CDN`も使えるが、今回はすでにpackage.JSONにてダウンロードしているので
htmlファイルでの読み込みは不要。


![スクリーンショット 2019-12-12 10.37.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/446210/01173837-474e-edc9-abe6-38e17ba4d8e3.png)

今回は[FLOCSS](https://qiita.com/annaaida/items/9a20813b5d4b8f2da67b)のルールにしたがっているので、**`foundation`****ディレクトリ下**に`library`フォルダを作ってダウンロードしたslick.scssを格納しました。ここにslickのプラグインとしての情報が入っています。

**scssファイルはhtmlファイルで読み込めない**ので、

```style.scss

/*foundation---------------------------------*/
@import './foundation/_reset.scss';
@import './foundation/library/slick.scss'; //ここ！
@import './foundation/_variables.scss';
@import './foundation/_mixins.scss';
@import './foundation/_base.scss';
/*-------------------------------------------*/

/*layout---------------------------------*/
@import './layout/footer.scss';
@import './layout/header.scss'; //ここより上に書く！
@import './layout/inner.scss';
/*-------------------------------------------*/

/*component---------------------------------*/
@import './object/component/button.scss';
@import './object/component/head.scss';
/*-------------------------------------------*/

/*project---------------------------------*/
@import './object/project/humanresources.scss';
@import './object/project/keyvisual.scss';
@import './object/project/problems.scss';
@import './object/project/request.scss';
@import './object/project/specialties.scss';
@import './object/project/usecases.scss';
/*-------------------------------------------*/

```

`style.scss` にて読み込みます。
**`cssは上から下へ読み込まれていくため、下の方が優先度が高いです。`**
今回はslickのscssの情報を打ち消して、`./layout/header.scss;`カスタマイズするので、これより上で読み込みます。

この`style.scss`は`webpack.config.babel.js`の下記の部分で読み込んでいます。

```webpack.config.babel.js

let config = {
  mode: nodeEnv,
  devtool: isDev ? 'source-map' : 'eval',
  entry: {
    app: [
      './src/js/app.js',
      './src/css/style.scss', //ここ！！
    ]
  },
  output: {
    publicPath: '/',
    path: dist,
    filename: forMentor
      ? 'sample/page-coding/js/[name].js'
      : 'js/[name].js'
  },

```

```index.html

<div class="js-carousel">
  <div class="slide"><img src="./img/picture/slide/01.jpg" alt=""></div>
  <div class="slide"><img src="./img/picture/slide/02.jpg" alt=""></div>
  <div class="slide"><img src="./img/picture/slide/03.jpg" alt=""></div>
</div>

```

```app.js

import 'slick-carousel';

$(function(){
  $('.js-carousel').slick({
    autoplay: true,
    dots: true,
    slideshowSpeed: 4000,
    fade: true,
  });
});

```
`$('.js-carousel').slick({`の部分で**指定した要素の子要素に対して**
slickの動きが適応されます。今回だと画像が入っている1つ1つの`<div>タグ`に当たる。

### オプション

slickには、たくさんのオプションが用意されています。これらをうまく組み合わせることで、複雑なスライダーを作成することもできます。参考：[どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方](http://ithat.me/2016/10/17/how-to-use-slick-jquery-plugin)

```app.js
$('.slider').slick({
  // 矢印キーでスライドを切り替えるか [初期値:true]
  accessibility: true,
  // スライドの高さが違うときに自動調整するか [初期値:false]
  adaptiveHeight: false,
  // 自動再生するか [初期値:false]
  autoplay: true,
  // 自動再生で切り替えする時間(ミリ秒) [初期値:3000]
  autoplaySpeed: 3500,
  // 前次ボタンを表示するか [初期値:true]
  arrows: true,
  // 別のスライドと連携したいときにクラス名を指定 [初期値:null]
  asNavFor: null,
  // 矢印ボタンの生成位置を変更 [初期値:$('.my-slide)]
  appendArrows: $('.my-slide'),
  // ドットナビゲーションの生成位置を変更 [初期値:$('.my-slide)]
  appendDots: $('.my-slide'),
  // 前ボタンの要素を変更 [初期値:'<button type="button" class="slick-prev">Previous</button>']
  prevArrow: '<a class="slick-prev" href="#">前へ</a>',
  // 次ボタンの要素を変更 [初期値:'<button type="button" class="slick-next">Next</button>']
  nextArrow: '<a class="slick-next" href="#">次へ</a>',
  // slidesToShowが奇数のとき、現在のスライドを中央に表示するか [初期値:false]
  centerMode: false,
  // centerMode:trueのとき、左右のスライドをチラ見せさせる幅 [初期値:'50px']
  centerPadding: '60px',
  // ease-in,ease-in-outなどCSSのイージング [初期値:'ease']
  cssEase: 'linear',
  // dots:trueのとき、ドットをサムネイルなどにカスタマイズ [初期値:n/a]
  customPaging: function(slick, index){
    var num = slick.$slides.eq(index).html();
    return '<b>' + num + '</b>';
  },
  // ドットナビゲーションを表示するか [初期値:false]
  dots: false,
  // ドットナビゲーションのクラス名を変更 [初期値:slick-dots]
  dotsClass: 'my-dots',
  // マウスドラッグでスライドの切り替えをするか [初期値:true]
  draggable: true,
  // スライド切り替えをフェードするか [初期値:false]
  fade: false,
  // クリックでメインのスライドを切り替えるか
  focusOnSelect: true,
  // jQueryのイージング [初期値:'linear']
  easing: 'linear',
  // スライドをループさせるか [初期値:true]
  infinite: false,
  // infinite:falseのとき、両端のスライドをドラッグしようとした際のバウンドスクロール値 [初期値:0.15]
  edgeFriction: 0.2,
  // 開始スライド（0から始まるので注意） [初期値:0]
  initialSlide: 2,
  // 画像の遅延表示タイプ（ondemand/progressive) [初期値:'ondemand']
  lazyLoad: 'ondemand',
  // モバイルファーストにするか [初期値:false]
  mobileFirst: false,
  // autoplay:trueのとき、マウスフォーカスしたら一時停止させるか [初期値:true]
  pauseOnFocus: true,
  // autoplay:trueのとき、マウスホバーしたら一時停止させるか [初期値:true]
  pauseOnHover: true,
  // autoplay:trueのとき、ドットナビゲーションをマウスホバーしたら一時停止させるか [初期値:false]
  pauseOnDotsHover: false,
  // レスポンシブ設定の基準（window/slider/min） [初期値:'window']
  respondTo: 'window',
  // レスポンシブ設定
  responsive: [
    {
      breakpoint: 1024,     // 600〜1023px
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,      // 480〜599px
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,      // 〜479px
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ],
  // 行数 [初期値:1]
  rows: 1,
  // スライド部分の要素のタグ名 [初期値:'']
  slide: 'div',
  // rowsの値が2以上のとき、1行あたりに表示させるスライド数 [初期値:1]
  slidesPerRow: 2,
  // 表示させるスライド数 [初期値:1]
  slidesToShow: 2,
  // 一度に移動させるスライド数 [初期値:1]
  slidesToScroll: 2,
  // スライド/フェードさせるスピード（ミリ秒） [初期値:300]
  speed: 400,
  // スワイプを検知するか [初期値:true]
  swipe: true,
  // slidesToScrollの値に関係なく、マウスドラッグやスワイプでスライドさせる際は1スライドずつ動かす [初期値:false]
  swipeToSlide: false,
  // タッチでスライドさせるか [初期値:true]
  touchMove: true,
  // (1/touchThreshold)*スライダーの横幅 分マウスドラッグするとスライドされる [初期値:5]
  touchThreshold: 5,
  // CSSのtransitionを使用するか [初期値:true]
  useCSS: true,
  // CSSのtransformを使用するか [初期値:true]
  useTransform: true,
  // 横幅がバラバラなスライドにするか [初期値:false]
  variableWidth: false,
  // 縦方向にスライドさせるか [初期値:false]
  vertical: true,
  // 縦方向のスワイプを有効にするか [初期値:false]
  verticalSwiping: false,
  // スライドの順番を逆にするか [初期値:false]
  rtl: false,
  // スライドアニメーション中サムネイルをクリックしたとき反応させないか [初期値:true]
  waitForAnimate: true,
  // z-index値 [初期値:1000]
  zIndex: 1000
});
```