ログイン
問題11

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

アイコン画像

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

ブラウザのアイコン期待する画面


タグアイコン解答ソースコード

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

コメントのアイコン解説

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

閉じる