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

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

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)ファイルをダウンロード

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

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

今回はFLOCSSのルールにしたがっているので、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の使い方

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
});