JQueryのフレームワークである「slick」が便利過ぎた![使い方を紹介]

jQuery

こんにちは!ソウシ(@gomasio2018)と申します!

突然ですが、皆さん、サイトのコーディングをしていて、スライドショーを実装するのに、手間取ったことはありますか?

そんな、皆さんに今回は、jQueryのフレームワークである「slick」を紹介します。

jQueryのフレームワークであるslickとは?

slickとは、スライドショーなどのスライド関連の実装を簡単にしてくれる、jQueryのフレームワークなのです。

実装だけでなく、多種多様なオプションを追加することで、デザインを変えることも可能です。

slickの便利さ

1つの例として普通、スライドショーを実装するときは、jQueryで「clickイベント」を記述して、「hasClass()」を使いながら実装します。

しかしながら、これだととても長い記述文になり大変です。

そういう時に、「slick」を使うと、たったの4,5行で立派なスライドショーが完成します。

slickの実装の方法

では、実際にslickの使い方を紹介していきます。

①フォルダをダウンロード

[手順:①]まずは、slickの公式サイトでフォルダをダウンロードします。

http://kenwheeler.github.io/slick/

[手順:②]サイトに飛んだら、サイトの上のメニューに「get it now」があるので、クリック

[手順:③]上の方にある、「download now」をクリックして、ダウンロードする。

こんな感じで、ダウンロードは完了です。

②サイトを制作するフォルダにファイルを置く

次に、実際にサイト制作するフォルダに先ほどダウンロードした、フォルダを置いていきます。

例として、上の画像のように置けば大丈夫です。

③テキストエディタに実装するコードを記述

最後に、テキストエディタにlinkタグとscriptタグを記述していきます。

<!DOCTYPE html><!-- r -->
<html lang=ja>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="stylesheet.css">
	<!-- cssファイルの後に設置 -->
	<link href="slick-1.8.1/slick/slick-theme.css" rel="stylesheet" type="text/css">
	<link href="slick-1.8.1/slick/slick.css" rel="stylesheet" type="text/css">
	<title></title>
</head>
<body>

<!-- jQuery本体も入れる -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script type="text/javascript" src="slick1.8.1/slick/slick.min.js"></script>
</body>
</html>

注目して欲しいのは、7、8、14、15行目です。

「7、8行目」でlinkタグを実装し「14、15行目」で、scriptタグを実装しています。

2種類のタグの「href属性」と「src属性」は、人それぞれパスが違うと思いますので、書き換える必要性があります。

今回のパスは、「手順②」の画像をもとに、パスを書いています。

slickの機能

実装は完了したので、ここからは実際にslickの機能を紹介していきます。

先ほども紹介したように、slickは、スライドショーを実装するのが得意なフレームワークとなります。

非常に多くの機能がありますので、今回は、基本的なものを紹介していきます。

スライドショーを実装

スライドショーを実装してみたいと思います。

画像は、実際に画像をスライドショーのようにしたものです。

次のスライドに切り替えるための、矢印はデフォルトで付いています(消すことも可能)。

<!DOCTYPE html><!-- r -->
<html lang=ja>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="stylesheet.css">
	<link href="slick-1.8.1/slick-1.8.1/slick/slick-theme.css" rel="stylesheet" type="text/css">
	<link href="slick-1.8.1/slick-1.8.1/slick/slick.css" rel="stylesheet" type="text/css">
	<title></title>
</head>
<body>
<div class="slides">
	<img src="beverage-3157395_1920.jpg" alt="">
	<img src="coffee-shop-1209863_1920.jpg" alt="">
	<img src="dubai-2057583_1920.jpg" alt="">
	<img src="business-2717063_1920.jpg" alt="">
	<img src="image-editing-101040_1280.jpg" alt="">
	<img src="laptop-2557576_1920.jpg" alt="">
</div>


<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script type="text/javascript" src="slick-1.8.1/slick-1.8.1/slick/slick.min.js"></script>
<script>
$(function(){
$(".slides").slick({
	autoplay:true,
});
});
</script>
</body>
</html>

今回のスライドショーの場合、一定時間で自動で次の画像に切り替わる仕組みとなっています。

スライドショーの実装には、3つの手順がありまして、

[手順:1]imgタグの親要素にclass名を付ける。

[手順:2]「$(“.クラス名”).slick({});」を記述する。

[手順:3]slick内に、「autoplay:true」を記述する。

たったのこの3つの手順で、スライドショーは完成します。

フレームワークを使わずに、普通のjQueryで作成するより、はるかに少ないコード数で作ることが出来ます。

今回記述したオプション「autoplay」は、画像が一定時間ごとに次の画像に切り替わる機能で、よく見るやつです。

デフォルトでは、約3秒で画像が切り替わります。

他にも、オプションを追加してみたい場合は、「autoplay:true」の下に追加していくだけ!とても簡単です。

その他のオプション

「autoplay」以外にもとても多くのオプションがあります。

すべてを紹介するのは、多すぎて無理ですが、主要なものだけ紹介していきたいと思います。

・dots →ドットインジケーターを追加。

・fade →スライダーの切り替えをフェイドインに切り替える

・mobaileFirst → レスポンシブの設定でモバイルの計算を優先させる。

デザインを変更したい場合

例えば、上のスライドショーの場合、「矢印の大きさを変えたい!色を赤色にしたい!」などのデザインを変えてみたい場合があると思います。

そんな時はslickフォルダの「slick-theme.css」の内部を変更することで、可能です。

矢印のサイズと色を変更

矢印のサイズを変更したい場合は、「slick-theme.css」の66行目あたりに、「.slick-prev」と「slick-next」の2つのクラスがあります。

この2つのクラスの「font-size」を変更すれば、矢印のサイズを変更できます。

次に、矢印の色の変更の仕方です。色は、先程のfont-sizeの下の方に、「color」があります。

デフォルトでは、colorは、「white」ですが、ここを他の色に変更すれば、矢印の色が変わります。

JQueryのフレームワークである「slick」[まとめ]

今回は、jQueryのフレームワークであるslickについて、解説しました。

jQuery自体でも、javascriptのフレームワークで、とてもjavascriptに比べて、色々なことが簡単に実装できるものですが、slickは、できることはスライド関連だけですが、とてもスライドに特化していて、とても簡単に実装できます。

今回紹介した、「オプション」以外にも、「イベント」がありますが、それに関しては、また今度、記事にしたいと思います。

皆さんも是非一度使ってみて、快適さを実感してみてください!

人気記事プログラミングスクールである「TECH::EXPERT」が素晴らしくオススメな理由[あの有名人も絶賛!]