jQueryスライダープラグインslickをSASSでカスタマイズする方法

jQuery

jQueryスライダープラグインslickをSASSでカスタマイズする方法を紹介します。

jQueryスライダープラグインslickをSASSでカスタマイズする方法

slickの導入方法

jQueryのminファイルをダウンロードします。
https://jquery.com/download/
上記のcompressedのバージョンをクリックして中身をプロジェクトにコピーします。
slick公式サイト
http://kenwheeler.github.io/slick/

上記サイトに移動して、get it nowをクリックし、その中のdownload nowをクリックします。

zipファイルを解凍し、以下のファイルをプロジェクトにコピーします。

  • slick.scss
  • slick-theme.scss
  • fontsフォルダ
  • ajax-loader.gif
  • slick.js

ファイルの配置は自分の環境に合わせて配置します。
slick.scssとslick-theme.scssは、src/sass/componentsフォルダへ。
fontsフォルダはslick-fontsとリネームして、src/imgフォルダへ。
ajax-loader.gifは上のslick-fontsフォルダへ。
slick.jsはjs/vendorsフォルダへ。
jquery.min.jsはsrc/js/vendors/jqueryフォルダへ。

gulpを設定する

gulpを使っている場合、ファイルパスを設定します。
上のようにファイルを配置した場合、下のようにファイルパスを設定できます。


// ファイルのパス
filesPath = {
  sass: './src/sass/**/*.scss',
  js: [
    './src/js/vendors/jquery/jquery.min.js',
    './src/js/vendors/*.js',
    './src/js/libs/*.js',
    './src/js/scripts.js',
  ],
  images: './src/img/**/*.+(png|jpg|jpeg|gif|svg|ttf|woff|eot)',
  html: './html/**/*.kit',
};

gulpの使い方は、gulpまとめを参考にしてみてください。

slider.jsを作成する

src/js/libsフォルダにslider.jsを作成します。
slickを動かすためのコードをslider.jsに記述します。

$(document).ready(function () {
  $('.slider').slick({
    dots: true,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    // fade: true,
    // cssEase: 'linear'
  });
});

$('.slider')の部分は、スライダーとして使いたいクラス名に変更します。
そのクラス名の子要素がスライダーになります。
slick({})の中で、スライダーの細かい設定ができます。

slickのdotsがtrueでも表示されない場合

dotsをtrueにしても表示されないときは、slickのfontsフォルダをプロジェクトに配置していないか、ファイルパスが間違っている可能性があるので、確認します。

htmlにクラスをつける

上の場合、sliderクラスがついている子要素がスライダーになります。

slick-theme.scssのカスタマイズ

最低限必要なカスタマイズは以下の通りです。

画像へのファイルパスを整える

$slick-font-path: "../img/slick-fonts/" !default; //TODO :要確認
$slick-font-family: "slick" !default;
$slick-loader-path: "../img/slick-fonts/" !default; //TODO :要確認

dotsやarrowの色を整える

$slick-arrow-color: white !default;
$slick-dot-color: $color-primary !default; //TODO :要確認

arrowの位置調整をする

.slick-prev,
.slick-next {
    position: absolute;
    display: block;
    ...
    z-index: 10;  //TODO :位置調整するなら設定必要
}
.slick-prev {
    left: 25px; //TODO :要位置調整
}

.slick-next {
    right: 25px; //TODO :要位置調整
}

arrowの位置を調整する場合で、スライダー内に入れたい場合、z-indexを設定してprevとnextのボタンが手前に表示されるようにします。
あとは、leftとrightの値をいじればOKです。

jQuery

Posted by devsakaso