ログイン

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

jQueryAnimationの問題

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¥
            

期待する画面

ログインして解答を見る
コードのアイコン

解答ソースコード

              $(function () {
  $(".slider").slick({
    autoplay: true,
    autoplaySpeed: 5000,
    dots: true,
  });
});
¥JavaScript¥
            
答えのアイコン

解説

どうだったでしょうか。ダウンロードとかめんどくさ、と思われるかもしれませんが、スライダーを一から作るともっとめんどくさいことになります。そしてカスタマイズ性もslickは非常に優れているため普通のスライダーならslickで作ることをおすすめします。
ご覧いただいたらわかると思うのですが、今回imageの読み込みのところにplacehold.jpと書いてあると思います。これは画像を好きな大きさで生成してくれるサイトなので覚えておきましょう。
ではやっと解説なのですが、実はほとんど解説する部分がございません。autoplayは自動再生、autoplaySpeedは自動再生のスピード、dotsは下の画像を選択できる点のことを言っており、それぞれ好きなようにカスタマイズできます。
完了にする!
LINEの友達追加でお役立ち動画をGET!!