問題
11slickでスライダーを簡単に作ろう！
jQueryAnimationの問題に挑戦しよう！
問題
「slickでスライダーを簡単に作ろう！」
スライダーなどは自作しようと思えばできますが、非常にコード多くなってしまいます。そういった時には世の中に数えきれないほど存在するプラグインを使うのも一つの手だと思います。今回はスライダーのプラグインと言えばと聞かれればまず1番に名前が出てくるslickの使い方を学習しましょう！
まずslickの公式ページのdownload nowからzipファイルをダウンロードし、解凍します。
次にajax-loader.gif、fonts、slick-theme.css、slick.css、slick.min.jsを取り込みます。
そしてslick-theme.css、slick.css、slick.min.jsをhtmlファイルに読み込みます。
あらかじめエディタに書くコード
<ul class="slider">
<li><img src="https://placehold.jp/300x200.png" alt=""></li>
<li><img src="https://placehold.jp/300x200.png" alt=""></li>
<li><img src="https://placehold.jp/300x200.png" alt=""></li>
</ul>
¥HTML¥
.slider{
list-style: none;
width: 300px;
padding: 0;
}
¥CSS¥
期待する画面
解答と解説
解説
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
どうだったでしょうか。ダウンロードとかめんどくさ、と思われるかもしれませんが、スライダーを一から作るともっとめんどくさいことになります。そしてカスタマイズ性もslickは非常に優れているため普通のスライダーならslickで作ることをおすすめします。
ご覧いただいたらわかると思うのですが、今回imageの読み込みのところにplacehold.jpと書いてあると思います。これは画像を好きな大きさで生成してくれるサイトなので覚えておきましょう。
ではやっと解説なのですが、実はほとんど解説する部分がございません。autoplayは自動再生、autoplaySpeedは自動再生のスピード、dotsは下の画像を選択できる点のことを言っており、それぞれ好きなようにカスタマイズできます。
