画面いっぱいのスライダーを実装する

2018.01.25　Posted by Coding_team

Webプログラミング

tecmemo1801 こんにちは、ウェブラボクリエイターズメモです。

今回は、多機能なスライダー実装できるjQueryプラグイン「slick」を紹介したいと思います。

最近個人的にスライダーを色々カスタマイズすることがあり、その際に使ってみてとても便利だったので備忘録としてここに書いときます。

まずは公式サイトからプラグインをダウンロードしてきます。ヘッダーのメニューに「get it now」とあるのでクリック、そこに「Download Now」ボタンがあります。

→「slick」公式サイト

では実装していきます。まずはDEMOをご覧下さい。

→作成したDEMO

メイン画像とサムネイル画像を連動させたウィンドウ幅いっぱいのスライダーを実装してみました。

少し設定が複雑ですが、解説していきます。

HTMLhead内に以下のようにCSSの読み込みとスクリプトを記述します。（別にhead内である必要はありません）

■HTMLhead部分

<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/slick.min.js"></script>
<script>
$(function() {
    $('#slider01').slick({ //メインのスライダーにしたい要素
          infinite: true, //スライドをループさせるか
          arrows: true, //前後ボタンの表示
          dots: true, //点の表示
          variableWidth: true, //横幅が異なるスライドにするか
          autoplay: true, //自動切り替え
          autoplaySpeed: 5000, //自動切り替えにかかる時間
          centerMode: true, //要素を中央へ
          asNavFor: '#slider02', //サムネイルのスライダーを指定
          responsive: [{
               breakpoint: 640, // 横幅640px以下で挙動変更
                    settings: {
                         variableWidth: false,
                         centerMode: false
               }
          }]
     });
    $('#slider02').slick({ //サムネイルのスライダーにしたい要素
          infinite: true, //スライドをループさせるか
          arrows: true, //前後ボタンの表示
          slidesToShow: 3, //表示する要素の数（ある程度設定しないとうまく動作しない？）
          variableWidth: true, //横幅が異なるスライドにするか
          autoplay: true, //自動切り替え
          autoplaySpeed: 5000, //自動切り替えにかかる時間
          centerMode: true, //要素を中央へ
          asNavFor: '#slider01', //メインのスライダーを指定
          focusOnSelect: true //クリックしたスライドにフォーカス
     });
});
</script>

$(function() {

$('#slider01').slick({ //メインのスライダーにしたい要素

infinite: true, //スライドをループさせるか

arrows: true, //前後ボタンの表示

dots: true, //点の表示

variableWidth: true, //横幅が異なるスライドにするか

autoplay: true, //自動切り替え

autoplaySpeed: 5000, //自動切り替えにかかる時間

centerMode: true, //要素を中央へ

asNavFor: '#slider02', //サムネイルのスライダーを指定

responsive: [{

breakpoint: 640, // 横幅640px以下で挙動変更

settings: {

variableWidth: false,

centerMode: false

}

}]

});

$('#slider02').slick({ //サムネイルのスライダーにしたい要素

infinite: true, //スライドをループさせるか

arrows: true, //前後ボタンの表示

slidesToShow: 3, //表示する要素の数（ある程度設定しないとうまく動作しない？）

variableWidth: true, //横幅が異なるスライドにするか

autoplay: true, //自動切り替え

autoplaySpeed: 5000, //自動切り替えにかかる時間

centerMode: true, //要素を中央へ

asNavFor: '#slider01', //メインのスライダーを指定

focusOnSelect: true //クリックしたスライドにフォーカス

});

</script>

スライダー部分のHTMLやCSSはお好みで調整してください。

■HTMLスライダー部分

<div class="slider">
	<ul id="slider01"> //メインのスライダーにしたい要素
		<li><img src="img/001.jpg" width="980" height="500" alt=""></li>
		<li><img src="img/002.jpg" width="980" height="500" alt=""></li>
		<li><img src="img/003.jpg" width="980" height="500" alt=""></li>
		<li><img src="img/004.jpg" width="980" height="500" alt=""></li>
		<li><img src="img/005.jpg" width="980" height="500" alt=""></li>
	</ul>
</div>
<div class="slider">
	<ul id="slider02"> //サムネイルのスライダーにしたい要素
		<li><img src="img/006.jpg" width="196" height="110" alt=""></li>
		<li><img src="img/007.jpg" width="196" height="110" alt=""></li>
		<li><img src="img/008.jpg" width="196" height="110" alt=""></li>
		<li><img src="img/009.jpg" width="196" height="110" alt=""></li>
		<li><img src="img/010.jpg" width="196" height="110" alt=""></li>
	</ul>
</div>