狼読

 

[jquery]slick.jsを使ってスライダーを作ってみよう

今回は、スライダーを作ってみようと思います。ホームページにはトップページにスライダーがあるホームページがやはり多いですよね。そんな幅広く使えわれているスライダーを作っていきます。作り方は非常にシンプルで、slick.jsを使用して作ってみようと思います。

スライダーを作るHTMLを用意しよう

まずは、slick.jsを読み込んでください。
読み込むものは次の通りです。

  • slick-theme.css
  • slick.css
  • slick-min.js

上記の3つを読み込めば、準備完了です。
HTMLを準備していきましょう。

<div class="sample_slider">
 <img src="画像のURL">
 <img src="画像のURL">
</div>

上記のように、divのなかに画像を読み込むように記述するだけでスライダーを作る準備するは完了します。

slick.jsを使ってスライダーにしてみよう

slick.jsをつかってスライダーを作ってみようと思います。

次のようなスクリプトを記述します。

<script>
 $(function(){
   $('.sample_slider').slick({
     dots:true,
   });
 });
</script>

上記のjqueryだけでスライダーとして機能します。

また、スライダーの画像を移動させるための矢印が最初はみ出ているのでcssで調整してみましょう。

<style>
.sample_slider{width:100%;}
.sample_slider .slick-prev{left:20px;}
.sample_slider .slick-next{right:20px;}
.sample_slider .slick-arrow{z-index:10;}
</style>

上記のように、戻るボタンと進むボタンの位置を調整してブロックのうえに来るようにしましょう。

slick.jsを使ってスライダーを作ってみたサンプル実装例

上記のように素敵なスライダーが出来上がりましたね。

まとめ

slick.jsを使ってスライダーの作り方を紹介させていただきました。

ホームページのトップページなどにスライダーがあるだけで見栄えが良いものになりますね。またコンテンツを1ブロックで複数打ちだせるというもの利点です。スライダーの作り方がわからないというかたのお力になれれば幸いです。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/06/05

[jquery]クリック時に矢印を動かして展開したことがわかるアコーディオンの作り方

投稿カレンダー

2020年10月
 1234
567891011
12131415161718
19202122232425
262728293031  

Technology

category

©狼読