前回まで
前回はslickを公式ドキュメントを読みつつ導入しました。
今回は、主にsettingの部分について解説していきます。
実際やってみないとわからない部分もあるので、実践あるのみ！！
今回の目標
See the Pen Untitled by yoruokamix (@Kei-Aoyama) on CodePen.
学習環境
ディレクトリ構造
.
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
├── slick/
│ ├── slick.js
│ ├── slick.css
│ ├── slick-theme.css
│ └── …
└── img/
├── sample01.jpg
├── sample02.jpg
└── sample03.jpg
最低限のリセットCSS+α
*,
::before,
::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
img {
width: 100%;
}
imgのwidth: 100%についてはわたしの手癖でもあるので、HTML/CSSは完璧に理解してるよ〜って方は読み飛ばしてもらって構いません。
ちょっと解像度の低い画像を準備してしまったときのことを考えて、表示が崩れないことを最優先にしています。
slickをカスタムしよう
前回、最低限のスライダーが完成しましたが、あれではさみしい……
ということで、
とりあえずyour contentを画像に変えてみる
your contentの部分をタグに書き換えていきましょう。
※今回から公式ドキュメントで【your-class】となっていた部分は【my-slick】に書き換えて進めていきます。
<div class="my-slick">
<div><img src="./img/sample01.jpg" alt="スライド01"></div>
<div><img src="./img/sample02.jpg" alt="スライド02"></div>
<div><img src="./img/sample03.jpg" alt="スライド03"></div>
</div>
ご自身のディレクトリ構造に合わせてパスは書き換えてください。
今回、わたしはsample03.jpgだけ縦長の画像を準備したのですが、こんな感じです。
デフォルトでは縦長の画像に合わせてスライダーが生成されるようです。
ここからプロパティを追加していくと、画像サイズの揃ったスライダーができるのではないかな？ということで次のステップに進みます。
※splideにはそういうプロパティがあったのですが、slickではCSSに書かないといけないっぽい。コンテナの高さが気になる方は、画像のアスペクト比を揃えて練習してみてください。
その前に、slick-theme.cssを読み込もう
slick.cssの次の行にslick-theme.cssを読み込んでみましょう。
Prev,Nextボタンが消えたと思いますが、実はいます。
検証ツールで見てもらうとわかるのですが、ボタンにposition:absoluteが設定されており、slickのコンテナ（slickを構成している要素の一番外っかわのことをこれからこう呼びます）からleftに-25px、rightに-25pxのところにいます。つまり、slickのコンテナが画面幅いっぱいだとボタンが見切れてしまうんですね……
また、ボタンの色が白になっているので白背景では見えないという罠もあり。
そこで、少しCSSをいじります。
body{
background:#ccc;
}
.my-slick{
/* prev,nextを表示するだけの余白をつくる */
width:calc(100% - 100px);
/* 中央寄せ */
margin-left:auto;
margin-right:auto;
}
いかがでしょうか、ボタンが見えるようになりましたか？
CSSごりごり書けるよ〜って人はslickのデフォルトスタイルを読み込まずに書いていくのも一つの手かもしれませんね。
プロパティを設定してみよう
では、主要なプロパティを説明していきます。
speed
スライド（フェード）アニメーションにかける時間です。
int型（整数）のms（ミリ秒）で指定します。デフォルト値は300ms。
speed: 500
autoplay
スライダーを自動再生するかどうかになります。
タイプはbooleanなので、true/flaseで設定します。
デフォルト値はfalse。
autoplay: true
では、実際に追加してみましょう。
$(function(){
$('.my-slick').slick({
//setting-name: setting-value
autoplay: true
});
});
スライダーが自動再生されるようになりましたか？
autoplaySpeed
speedに似ていますが、こちらはスライドが切り替わるまでの時間です。autoplay:trueとセットで使います。
int型（整数）のms（ミリ秒）で指定します。デフォルト値は3000ms。
autoplaySpeed: 5000
先程のautoplayに追加するとこう。
$(function(){
$('.my-slick').slick({
//setting-name: setting-value
autoplay: true,
autoplaySpeed: 5000
});
});
注意！
プロパティとプロパティは,(カンマ)で区切ります。
;(セミコロン)ではないことに注意すること。
pauseOn●●
●●したときにautoplayを止めるかどうか。初期値はtrue。
例えばpauseOnHoverだったら、マウスホバーしたときにautoplayを止める。
ユーザーがスライドをじっくり見ることができるメリットもあるが、場合によってはautoplayを妨げることもある。（スライドを全画面で表示するときとか）
infinity
スライダーを無限ループさせるかどうか。初期値はtrue。
fade
アニメーションをslideからfadeにする。初期値はfalse。
dots
slickコンテナの下にドットを表示する。初期値はfalse。
スライダーに何枚のスライドがあるかを可視化できる。
$(function(){
$('.my-slick').slick({
//setting-name: setting-value
dots: true
});
});
dots:trueにするとこんな感じです。
slickコンテナの下にちっちゃくドットがあります。
slcik-theme.cssを読み込んでいない場合は、
next
1
2
のように、nextボタンに続いて数字が縦並びで表示されてしまうので、
このあたりに対してCSSを当てていくことになります。
dotsClass
dotsとセットで使用します。
dotsはul要素として出力されるのですが、ulにつけるclass名を変更できます。
デフォルトは【slick-dots】です。↑のスクショ参考。
slidesToShow
１度に何枚のスライドを見せるかになります。
初期値は１です。
slidesToScroll
１度に何枚のスライドを送るかになります。
初期値は１です。
最低限、知っておくとよいプロパティこのくらいかなと思います。
おまけのCSS
高さの違う画像を、すべて同じ高さで見せたいときは、CSS側で設定をしてやる必要があります。
やり方はいくつかあるとは思うのですが、ここではaspect-ratioを使用します。
かつてはIEに阻まれてaspect-ratioを使えないこともありました。
しかし、今やIEという人類共通の敵は消え去りました。aspect-ratioの時代がやってきたのです
画像を切り抜いて高さを揃える
img{
width:100%;
/* 任意のアス比率 */
aspect-ratio: 3 / 2;
/* アス比に合わせて画像を切り抜く */
object-fit:cover;
/* 切り抜く基準の位置を変えたい場合はobject-positionを追加する */
}
この画像の場合は、ちょうど縦長の写真の中央に猫ちゃんがいたのでいい感じにトリミングされていますね。
画像の横幅を小さくして対応する
img{
width:100%;
/* 任意のアス比率 */
aspect-ratio: 3 / 2;
/* アス比に合わせて画像を切り抜く */
object-fit:contain;
}
object-fitがキーになってくるので、詳しく知りたい方は検索してみてください。
まとめ
今回はsettingのプロパティについて説明しました。
次回からは実際にどういうスライダーをにしたいかを決めてから、どのように実装するのかを解説していきたいと思います。