問題11: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ファイルに読み込みます。
まず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¥
期待する画面
解答ソースコード
$(function () {
$(".slider").slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
});
});
¥JavaScript¥
完了にする!
活動記録をTweetする
ご覧いただいたらわかると思うのですが、今回imageの読み込みのところにplacehold.jpと書いてあると思います。これは画像を好きな大きさで生成してくれるサイトなので覚えておきましょう。
ではやっと解説なのですが、実はほとんど解説する部分がございません。autoplayは自動再生、autoplaySpeedは自動再生のスピード、dotsは下の画像を選択できる点のことを言っており、それぞれ好きなようにカスタマイズできます。