前回まで
前回はslickのプロパティを少し解説しました。
今回は前回説明しなかったプロパティも出てきますが、その都度、解説をしていきたいと思います。
どんなスライダーにしたいかを考える
スライダーと一口に言ってもいろいろありますよね。
今回は、一番シンプル（だと思われる）、
- 画面幅いっぱいにスライド表示
- 自動再生
- ボタンやドットはなし
のスライダーを作成したいと思います。
今回の目標
See the Pen my-slick003 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;
}
ul,
ol {
list-style: none;
}
/* 場合によっては上書きすることになるが一応入れておく */
img{
width: 100%;
}
注意
リセットCSSは実際にslickを導入する環境に合わせる。
あとからリセットCSSを追加したり削除したりすると見た目が崩れることがあるので注意。
その場合、この記事の見た目と多少の違いが出ることがあります。
実際に書いてみましょう
slickの導入
記事①②を参考にslickを読み込んでください。
HTML
<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>
slickコンテナはulでつくるよ！って解説してる記事もあるんですが、生成されたHTMLを見てみるとulの直下にdivが入ってきちゃうんですよね。
これはHTMLの構文としてよろしくないことなので、今回はdivを使います。
ulで実装したときに実際に出力されるコードの例
<ul class="my-slick">
<button>...</button>
<div class="slick_list">
…（省略）…
<li><img src="sample.jpg"></li>
…（省略）…
<li><img src="sample.jpg"></li>
…（省略）…
</div>
<button>...</button>
</ul>
JS
$(function(){
$('.my-slick').slick({
//setting-name: setting-value
});
});
必要なプロパティ
| setting-name | setting-value | 説明 |
|---|---|---|
| autoplay | true | スライダーの自動再生する |
| arrows | false | prev/nextボタンを生成しない |
| pauseOnHover | false | マウスホバーで再生を止めない |
スライダーを画面いっぱいに広げたので、マウスホバーで自動再生が止まらないようにします。
この時点で、imgのwidth:100%の効果で画面の横幅いっぱいに画像が広がっていると思います。ただ、高さが画面の高さと一致していないし、バラバラ。
そこで、CSSを使って画面の高さで画像を切り抜いていきます。
CSS
/* なんでか左に余白ができてスクロールできてしまうのでスクロールできないようにする */
.my-slick{
overflow-x: hidden;
}
/* .my-slick内のimgにのみ適用 */
.my-slick img{
/* 画面の幅いっぱい */
width: 100vw;
/* 画面の高さいっぱい */
height: 100vh;
/* 切り抜く */
object-fit: cover;
}
前回、aspect-ratioを紹介しましたが、今回はアス比が固定ではないので、画面に合わせて切り抜くように指定していきます。
レスポンシブ対応してみよう
ブレークポイントごとに表示する枚数やarrowの表示/非表示を切り替えたい場合はresponsiveプロパティを設定する必要がありますが、画面幅によって表示する画像を変えたい場合はHTMLの書き換えだけでOKです。
picture要素を使っていきます。
picture要素は0個以上のsource要素と1個のimg要素から成ります。
詳しくはMDN Web Docsを読んでおくれ。
MDN Web Docs <picture>
<div class="my-slick">
<picture>
<source srcset="./img/sample01.jpg" media="(min-width: 600px)">
<img src="./img/sample01-sp.jpg" alt="スライド01">
</picture>
<picture>
<source srcset="./img/sample02.jpg" media="(min-width: 600px)">
<img src="./img/sample02-sp.jpg" alt="スライド01">
</picture>
</div>
pictureタグに差し替えて、sourceには画面幅が600px以上のときに表示する画像、imgにはそれ以外のときに表示する画像を入れています。
これだけで、画面幅に合わせて画像が切り替わってくれます。
このpictureタグはslickに限らず使えるのでぜひ覚えてくださいね。
まとめ
今回は、考えうるスライダーの中で最もシンプルなものを実装してみました。
次回は、demosにあるCenter Modeを実装してみたいと思います