【jQuery】slickの基本の使い方

slickとは？？

slickとは以下のようなスライダーのことです！

矢印やドットをクリックしたり、ドラッグしたりスワイプ(スマホ)することでコンテンツを切り替えることができます。

うさぎ

うさぎたんの写真ボヤボヤやんけ！

このスライダーはSlickというjQueryのライブラリを使用して作られています。

私がweb制作の仕事をするようになってから最も多く使っているライブラリがSlickです。

ライブラリとしての安定性があって、簡単に使用できるので安心感があります。

公式のslickのサイトは以下のリンクより確認できます。

参考slick – the last carousel you’ll ever needSlick

さっそく使い方を見ていきましょう！！

大まかな流れ

HTMLのマークアップする

jQeryの読み込み

slickの必要ファイルをダウンロード・設置

slickの初期化

slickのマークアップをする

<!DOCTYPE html>
<html lang="ja">
  <head>
		<!--省略-->
  		<link rel="stylesheet" href="css/style.css">
	</head>

	<body class="body">
      <!--ここからslick用コード-->
      <div class="slick">
  			<div><img src="img/slick1.png" alt=""></div>
         <div><img src="img/slick2.png" alt=""></div>
			<div><img src="img/slick3.png" alt=""></div>
		</div>
      <!--ここまで-->
 	</body>
</html>

jQueryの読み込み

slickはjQueryで動くので、まずは jQueryを使えるようにCDNで読み込みます。

私は普段Google Hosted LibrariesのjQueryの項からCDNを使わせてもらっています。

jQueryは</body>の直前に記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!DOCTYPE html>
<html lang="ja">
	<head>
		<!--省略-->
  		<link rel="stylesheet" href="css/style.css">
	</head>

	<body class="body">
  		<div class="slick">
  			<div><img src="img/slick1.png" alt=""></div>
         <div><img src="img/slick2.png" alt=""></div>
			<div><img src="img/slick3.png" alt=""></div>
		</div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 	</body>
</html>

slickの必要ファイルをダウンロード

slickにアクセスし、ヘッダーのget it nowをクリックします。

すると、Go Get Itの見出しまで移動するので、Download Nowをクリックします。

zipファイルがダウンロードされるので、解凍します。

解凍したファイル(slick-1.8.1)の中にさらにslickディレクトリがあるので開きます。

この中で必要なディレクトリ・ファイルは、

slick.min.js
slick.css
slick-theme.css
fonts(ディレクトリ)
ajax-loader.gif

です。

自分のプロジェクトの中にslickディレクトリを作成し、上記の必要なファイル群を入れます。

slickのCSSとJSの設置場所

<!DOCTYPE html>
<html lang="ja">
	<head>
		<!--省略-->
      <!--slickのcss読み込みここから-->
  		<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
      <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
      <!--slickのcss読み込みここまで-->
  		<link rel="stylesheet" href="css/style.css">
	</head>

	<body class="body">
  		<div class="slick">
  			<div><img src="img/slick1.png" alt=""></div>
         <div><img src="img/slick2.png" alt=""></div>
			<div><img src="img/slick3.png" alt=""></div>
		</div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <!--slickのjs読み込みここから-->
   		<script type="text/javascript" src="slick/slick.min.js"></script>
      <!--slickのjs読み込みここまで-->
 	</body>
</html>

css

cssは<head></head>内に記述します。

この時独自のcssファイルより先に読み込むことをオススメします。

そうすれば、slickに追加でCSSを当てるときに上書きができるからです。

(コードは上から読み込まれる。後で読み込まれたコードで上書きする。)

jsは</body>の直前に設置します。

jsはjQueryの読み込みより後に設置しなければなりません。

slickの初期化

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!--省略-->
  </head>
  <body class="body">
    <div class="slick">
      <div><img src="img/slick1.png" alt=""></div>
      <div><img src="img/slick2.png" alt=""></div>
      <div><img src="img/slick3.png" alt=""></div>
    </div>

    <!-- (CDN)jQuery読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
    
    <!--ここから-->
    <script>
      $(document).ready(function(){
        $('.slick').slick({
        });
      });
    </script>
    <!--ここまで追加-->
    
  </body>
</html>

slickコンテンツのマークアップ部分の親クラスを指定して、jQueryを記述します。

setting-name: setting-valueの部分を特別指定しなくてもそれなりの表示をしてくれます。

何も指定しない場合、前ヘ次へボタンが付いたシンプルなスライダーになります。

前へ次へボタンの多少の調整が必要であることが多いです。

とりあえずここまで！

うさぎ

おつかれええええええ！！！！