slickでスライダーを簡単に作ろう！

Question

問題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ファイルに読み込みます。

あらかじめエディタに書くコード

                <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¥

Answer 1

解答ソースコード

              $(function () {
  $(".slider").slick({
    autoplay: true,
    autoplaySpeed: 5000,
    dots: true,
  });
});
¥JavaScript¥

slickでスライダーを簡単に作ろう！

問題11：slickでスライダーを簡単に作ろう！

あらかじめエディタに書くコード

期待する画面

解答ソースコード

解説