jQueryスライダープラグインslickをSASSでカスタマイズする方法
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
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',
};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 :要位置調整
}