JQueryのスライダープラグイン「slick」で特定の項目を除外する。

JQueryのスライダープラグイン slick で特定の項目を除外できることがわかりましたのでメモしておきます。

JQueryのプラグイン slick とはなにか?

JQueryプラグインのslickはウェブページの画像なんかをスライド式にするときに便利なプラグインになります。

それで実をいうとこのプラグイン、無料WordPressテーマのCocconには何もしなくてもはじめから導入されています。ですので筆者は導入作業をやっていません。しかしながら通常の場合は以下のサイトから slickプラグイン をダウンロードできるようです。

設置するファイルとしては以下のようなもになるようです。

  • ajax-loader.gif
  • fonts(フォルダ)
  • slick-theme.css
  • slick.css
  • slick.min.js

ファイルが準備できたら以下のように読み込みを行えばよいようです。

<link href="js/slick-theme.css" rel="stylesheet" type="text/css">
<link href="js/slick.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>

基本的な使い方としては以下のようなコードになります。※↓のコードは公式サイトにも記述されています。

$('.multiple-items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

.multiple-itemsとはたとえばどのようなものか想像しにくいですが、たとえば以下のように使用すると思っていただければ「なるほど」となるはずです。

<div class="multiple-items">
<img src="">
<img src="">
<img src="">
</div>

そして、この記事の内容はslickの除外についての記事ですので基本的な使い方はこのくらいにして次の見出しにすすみます。

slickで特定の項目を除外する。

slickを使う時は結局のところスライドさせたい親要素を指定する必要があります。それであまりないケースかもしれませんが、その親ボックスの中にスライドさせたくない要素も含まれていることがあります。あまり詳しくはわかってないのですが、slickで親を指定した場合、子要素すべてがスライドされるようになってしまうようです。そのためスライドさせたくないときは専用のオプションを使用することができます。

slickの除外オプションは slide です。しかし除外というよりこちらは、子要素のうちどれをslide要素にするかを決定するものです。なのでこれをつかうと結果的にはスライドさせたくない要素を除外することができるわけですね。たとえば以下のように記述することができます。

$('.multiple-items').slick({
  infinite: true,
  slide: ".hoge"
});

ダブルクォーテーションの中にクラス名なども指定できるわけですね。セレクターではなくて要素名を直接指定することもできるようです。

除外だけではちょっとおもしろくないので、次はslickボタンをカスタマイズする方法です。↓

slickボタンのカスタマイズ

実は任意のslickボタンを出力できるオプションもあります。実はWPテーマのCocconにはslickがはじめからはいっています。しかしオリジナルのカルーセルを作りたかった場合、slickのセレクターがかぶってしまい。一つのcssだけをカスタマイズしたいんだけど、両方に反映されてしまうようなケースがあります。(まずないとは思いますが)

そこで活躍するのが任意のslickボタンを出力するオプションです。これはprevArrownextArrowを使うことで実現できます。例えば以下のようなコードになります。

$('.multiple-items').slick({
  infinite: true,
  prevArrow: '<button type="button" class="slick-prev" id="myprev">Prev</button>',
  nextArrow: '<button type="button" class="slick-next" id="mynext">Next</button>'
});
<button type=”button” class=”slick-prev” >Next</button>がデフォルトで出力されるボタンになります。上記のコードはidを追加して出力されるようにしています。

まとめ

今回はslickの除外とボタンカスタマイズだけしか触れませんでしたが、Jqueryのslickプラグインに関する詳細な情報については以下のサイトが非常に参考になります。

少ない情報でしたが、この記事はこれで終わります。