こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！
今回は、超簡単にスライダーが実装できるプラグイン「slick」をご紹介します。
slickは、レスポンシブにも対応していて、とても柔軟にカスタマイズできるので、使いやすくおすすめです。
YouTubeにもアップしていますので、見ていただけたら嬉しいです！
slickとは？
slick（スリック）とは、スライダーが簡単に実装できるjQueryのプラグインです。
しかも、MITライセンスなので無料で利用でき、さらにカスタマイズも商用利用もOKなので、多くの人に愛用されています。
スライダーは、数枚の画像を見せたいときにとても便利な見せ方で、特にECサイトなどで良く見るかと思います。
スライダーを自作で作るとなると結構手間ですが、slickを使えば超簡単に実装することができます。
slickの使い方
それでは早速slickの使い方を解説します。
htmlとcssの準備
以下の3枚の画像にスライダーを実装したいと思います。
htmlとcssは以下です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="keywords" content="web, デザイン, xxx">
<meta name="description" content="xxxxxxx">
<meta name="viewport" content="width=device-width">
<title>xxxxxxx</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="bicycle">
<h2>Bicycle</h2>
<div class="list-flex">
<div class="list-flex-child">
<img src="img/bicycle1.jpeg" alt="">
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキスト</p>
</div>
<div class="list-flex-child">
<img src="img/bicycle2.jpeg" alt="">
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキスト</p>
</div>
<div class="list-flex-child">
<img src="img/bicycle3.jpeg" alt="">
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキスト</p>
</div>
</div>
</section>
</body>
</html>@charset "UTF-8";
/*-------------------------------------------
リセット
-------------------------------------------*/
img {
max-width: 100%;
width: 100%;
}
ul li {
list-style: none;
}
/*-------------------------------------------
Bicycle
-------------------------------------------*/
#bicycle {
max-width: 960px;
margin: 0 auto 100px;
text-align: center;
}
#bicycle h2 {
display: inline-block;
font-size: 30px;
text-align: center;
margin: 0 auto 60px;
border-bottom: solid 1px #383e45;
}
.list-flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list-flex-child {
width: 32%;
}
@media screen and (max-width: 768px) {
.list-flex-child {
width: 48%;
}
}slickのダウンロード
次に、slickのダウンロードをします。
以下の公式からダウンロードできます。
http://kenwheeler.github.io/slick/
必要なファイルをコピーする
ダウンロードできたら、「slick.js」と「slick.css」ファイルをコピーして、自分のサイトデータにコピーします。
slickを読み込む
コピーしてきたファイルを読み込みます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="keywords" content="web, デザイン, xxx">
<meta name="description" content="xxxxxxx">
<meta name="viewport" content="width=device-width">
<title>xxxxxxx</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/slick.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/slick.js"></script>
</head>- 10行目：「slick.css」を読み込む
- 11行目：「jQuery」を読み込む
- 12行目：「slick.js」を読み込む
jQueryを読み込まないと動かないので、忘れずに読み込みましょう。
slickを実行するスクリプトを記述
最後に、slickを実行するスクリプトを記述します。
ここでは「slick.js」の下に記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="keywords" content="web, デザイン, xxx">
<meta name="description" content="xxxxxxx">
<meta name="viewport" content="width=device-width">
<title>xxxxxxx</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/slick.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/slick.js"></script>
<script>
$(function () {
$('.list-flex').slick();
});
</script>
</head>ブラウザで確認すると、スライダーが実装されているかと思います。
スライダーのオプションを追加する
slickには、いろいろオプションが用意されていて、これも簡単に追加することができるようになっています。
例えば、3秒間ごとに自動で画像がスライドするようにしてみます。
<script>
$(function () {
$('.list-flex').slick({
autoplay: true,
autoplaySpeed: 3000
});
});
</script>このように、slickを実行するスクリプトに追加すれば、簡単に実装することができます。
他にもたくさんのオプションが用意されていますので、調べてみてください。
最後に
以上、超簡単にスライダーが実装できるプラグイン「slick」をご紹介しました。
slickはとても便利で、僕も何回も使っています。
何回か使うと、slickにできることできないことも分かってきて、スライダーを実装する時に何を導入すれば良いか迷う時間も少なくなります。
大体はslickで実現できてしまうことが多いので、まずはslickで試すことをおすすめします。
最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。
コメント