Webサイトで画像やコンテンツをスライドさせる場合は、jQueryのスライダープラグインslickをよく使います。
僕が携わるwebサイトの9割はレスポンシブWebデザインなので、レスポンシブ 用の設定ができるslickは重宝しています。
実際にslcikをレスポンシブWebデザインのサイトに実装する方法を解説します。
まずはslickを動かしてみる
まずはWebサイトにslickを実装します。
公式サイトからslickをダウンロードしましょう。
公式サイトの「Download Now」ボタンをクリックするとダウンロードできます。
htmlファイルの<head>と</head>の間に以下のコードを記述してslcikのCSSファイルを読み込みます。
CSSファイルまでのパスは、自分の環境に合わせて書き換えてください。
<link rel="stylesheet" href="slick/slick.css">
<link rel="stylesheet" href="slick/slick-theme.css"></body>タグの直前に以下のコードを記述してjQueryとslcikのjsファイルと読み込みます。
一緒にslickを動作させるためのスクリプトも記述しておきます。
jsファイルまでのパスは、自分の環境に合わせて書き換えてください。
jQueryのバージョンは1.7以上を指定してください。
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="slick/slick.js"></script>
<script>
$(document).ready(function(){
$('.slider').slick();
});
</script>slickでスライドさせる箇所に以下のコードを記述します。
今回は画像をスライドさせますが、画像以外にもテキストやコンテンツをスライドさせることもできます。
<div class="slider">
<div><img src="images/img_01.jpg" alt="画像01"></div>
<div><img src="images/img_02.jpg" alt="画像02"></div>
<div><img src="images/img_03.jpg" alt="画像03"></div>
</div>以上でslickの実装は完了です。
slickのオプションを設定する
slickのオプションを設定してみましょう。
以下の用に記述するとスライダーの自動再生が有効になります。
<script>
$(document).ready(function(){
$('.slider').slick({
autoplay: true
});
});
</script>さらにドットナビゲーションを表示する場合は以下のように記述します。
<script>
$(document).ready(function(){
$('.slider').slick({
autoplay: true,
dots: true
});
});
</script>このように$('.slider').slick({と});の間にオプション用の記述を追加していくことで、slickのオプションを設定することができます。
他にもいろいろなオプションが用意されているので、興味がある方は公式サイトをチェックしてみてください。
slickのレスポンシブ 用のオプションを設定する
それでは本題のレスポンシブ 用のオプションを設定していきます。
仮にウインドウ幅425pxでオプション設定を切り替える場合の記述は以下のようになります。
<script>
$(document).ready(function(){
$('.slider').slick({
// ウインドウ幅425px以上のオプションを記述
responsive: [{
breakpoint: 425,
settings: {
// ウインドウ幅424px以下のオプションを記述
}
}]
});
});
</script>例えば、ウインドウ幅424px以下では画像を1枚だけ表示し、ウインドウ幅425px以上では画像を3枚表示する場合は以下のようなコードになります。
<script>
$(document).ready(function(){
$('.slider').slick({
slidesToShow: 3,
responsive: [{
breakpoint: 425,
settings: {
slidesToShow: 1,
}
}]
});
});
</script>オプションのブレイクポイントは複数指定することも可能です。
<script>
$(document).ready(function(){
$('.slider').slick({
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 425,
settings: {
slidesToShow: 1,
}
}
]
});
});
</script>このようにウインドウ幅によって柔軟にオプション設定を切り替えることができます。
よく使うslickのオプション設定をご紹介
僕がよく使うslickのオプション設定をご紹介します。
動作イメージは以下のような感じです。
- スマートフォンでは画像を1枚表示する
- スマートフォン以外では表示中の画像を中央に配置し、その他の画像を左右に配置する
slickのオプション設定は以下のようになります。
<script>
$(document).ready(function(){
$('.slider').slick({
arrows: false, // 矢印を非表示
dots: true, // ドットナビゲーションを表示
autoplay: true, // 自動さ性を有効
centerMode: true, // センターモードを有効
centerPadding: '20%', // センター画像の左右の余白を指定
responsive: [
{
breakpoint: 768,
settings: {
centerPadding: '10%' // センター画像の左右の余白を指定
}
},
{
breakpoint: 425,
settings: {
centerPadding: '0' // センター画像の左右の余白を指定
}
}]
});
});
</script>centerPaddingにつては使用する画像のアスペクト比によって調整しています。
画像をスライドコンテンツいっぱいに広げるため、以下のCSSを追加します。
<style>
.slider img {
height: auto;
width: 100%;
}
</style>以上が個人的によく使うslickのオプション設定です。
用途に応じていろいろとカスタマイズして使ってみてください。
まとめ
slickは導入が簡単で、オプション設定が多いのでとても使いやすいjQueryプラグインです。
Webサイトにスライダーを実装する際は、ぜひ使ってみてください。