【Labs】スマホ対応レスポンシブデザインカルーセルスライダー【slick】

Posted on 2016-09-02
Last updated on 2017-09-24

こんにちは（・∀・）

jQueryプラグインを使用したサンプルをご紹介します。今回使用するライブラリはカルーセルスライダーのslickです。

これまでも設置が簡単なカルーセルスライダーjCarouselLiteや、simplyScroll v2などをご紹介してきましたが、こちらのプラグインは設置が簡単なのに加えて、スタイルの変更も簡単にできるので、それらプラグイン以上に導入しやすいのではないかと思い今回ご紹介することとしました。

こちらのプラグインslickは、配布元にもサンプル例はあるのですが、サンプル例が色々とあり、設定方法もたくさんあって悩みそうなので、当サイトでよく使いそうなパターンのサンプルをいくつか作ってご紹介したいと思います。

single-item
multiple-items
center
slider-for・slider-nav

ファイルのダウンロード

次のプラグイン配布元からファイルをダウンロードします。
slick
「get it now」をクリックするとダウンロードボタンが表示されますのでそれをクリックしてファイルをダウンロードしてください。

ダウンロードしたファイルを解凍するといくつかのファイルとフォルダがあります。その中にある
slick.css
slick-theme.css
slick.min.js
を使用します。

オプション設定

値

説明

autoplay

true or false

オートプレイが有りならtrue、無しならfalse。

autoplaySpeed

数値(ms)　デフォルトは3000

オートプレイの画像が切り替わる時間

arrows

true or false

ナビゲーションの矢印が有りならtrue、無しならfalse。

dots

true or false

画像下のドットが有りならtrue、無しならfalse。

infinite

true or false

ループが有りならtrue、無しならfalse。

initialSlide

数値　デフォルトは0

最初の画像の位置

pauseOnHover

true or false

ホバーしたとき再生を止めるならtrue、止めないならfalse。

responsive

デフォルトは無し

レスポンシブデザイン

slidesToShow

数値　デフォルトは1

画像の表示枚数

slidesToScroll

数値　デフォルトは1

スライドする数

speed

数値(ms)　デフォルトは300

スライドアニメーションの時間

オプション設定は他にもあります。プラグイン配布元slickでご確認ください。

1. サンプル(single-item)

HTML

slick.cssとslick-theme.cssを<head>内に読み込みます。


<link rel="stylesheet" href="slick.css">
<link rel="stylesheet" href="slick-theme.css">

次のHTMLを<body>内に読み込みます。


<div class="slider single-item">
<div><a href="#"><img src="img/1.png"></a></div>
<div><a href="#"><img src="img/2.png"></a></div>
<div><a href="#"><img src="img/3.png"></a></div>
<div><a href="#"><img src="img/4.png"></a></div>
<div><a href="#"><img src="img/5.png"></a></div>
</div>

CSS


.single-item {
  width: 300px;
  height: 169px;
  margin: 0 auto;
}
.single-item img {
  width: 100%;
  height: auto;
}
.slick-prev:before,
.slick-next:before {
  color: #999;
  font-size: 28px;
}
.slick-prev,
.slick-next {
  display: inline-block;
  height: 40px;
}
.slick-prev:before {
  content: '<';
}
.slick-next:before {
  content: '>';
}
.slick-dots li button:before {
  font-size: 28px;
}
@media (min-width: 480px) {
.single-item {
  width: 480px;
  height: 270px;
}
/* ** */}
@media (min-width: 768px) {
.single-item {
  width: 800px;
  height: 450px;
}
/* ** */}

こちらのCSSはslick-theme.cssの一部を上書きしてあるだけです。更に細かく設定したい場合はslick-theme.css内を変更してみてください。

JavaScript

サンプルデモ1-1のJavaScriptはこちらです。次のコードを</body>直前に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="slick.min.js"></script>
<script>
$(function() {
$('.single-item').slick({dots:true});
});
</script>

サンプルデモ1-2のJavaScriptはこちらです。サンプルデモ1-1と同じく次のコードを</body>直前に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="slick.min.js"></script>
<script>
$(function() {
$('.single-item').slick({
dots:true,
autoplay: true,
autoplaySpeed: 5000,
speed: 2000
});
});
</script>

Result

サンプルデモ1-1・サンプルデモ1-2はこちら

ブレークポイントは480px以下がスマホサイト、768px以下がタブレット、769px以上でPCサイトで設定してあります。

サンプルデモ1-1とサンプルデモ1-2のHTMLとCSSは共通です。

2. サンプル(multiple-items)

HTML

サンプルデモ1と同じくslick.cssとslick-theme.cssを<head>内に読み込みます。


<link rel="stylesheet" href="slick.css">
<link rel="stylesheet" href="slick-theme.css">

こちらもサンプルデモ1と同じく次のHTMLを<body>内に読み込みます。

クラス名single-itemをmultiple-itemsに変更します。


<div class="slider multiple-items">
<div><a href="#"><img src="img/1.png"></a></div>
<div><a href="#"><img src="img/2.png"></a></div>
<div><a href="#"><img src="img/3.png"></a></div>
<div><a href="#"><img src="img/4.png"></a></div>
</div>

CSS


.multiple-items {
  width: 300px;
  margin: 0 auto;
}
.multiple-items img {
  width: 100%;
  height: auto;
}
.slick-prev:before,
.slick-next:before {
  color: #999;
  font-size: 28px;
}
.slick-prev,
.slick-next {
  display: inline-block;
  height: 40px;
}
.slick-prev:before {
  content: '<';
}
.slick-next:before {
  content: '>';
}
.slick-dots li button:before {
  font-size: 28px;
}
@media (min-width: 480px) {
.multiple-items {
  width: 480px;
}
/* ** */}
@media (min-width: 768px) {
.multiple-items {
  width: 800px;
}
/* ** */}

JavaScript

サンプルデモ2-1のJavaScriptはこちらです。こちらもサンプルデモ1と同じく次のコードを</body>直前に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="slick.min.js"></script>
<script>
$(function() {
$('.multiple-items').slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
});
</script>

サンプルデモ2-2のJavaScriptはこちらです。サンプルデモ2-1と同じく次のコードを</body>直前に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="slick.min.js"></script>
<script>
$(function() {
$('.multiple-items').slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
speed: 1000,
initialSlide: 0
});
});
</script>

Result

サンプルデモ2-1・サンプルデモ2-2はこちら

HTMLのクラス名single-itemをmultiple-items変更することを忘れずに。

サンプルデモ2-1とサンプルデモ2-2のHTMLとCSSは共通です。

3. サンプル(center)

HTML

他サンプルデモと同じくslick.cssとslick-theme.cssを<head>内に読み込みます。


<link rel="stylesheet" href="slick.css">
<link rel="stylesheet" href="slick-theme.css">

こちらも他サンプルデモと同じく次のHTMLを<body>内に読み込みます。

クラス名をcenterに変更します。


<div class="slider center">
<div><a href="#"><img src="img/1.png"></a></div>
<div><a href="#"><img src="img/2.png"></a></div>
<div><a href="#"><img src="img/3.png"></a></div>
<div><a href="#"><img src="img/4.png"></a></div>
<div><a href="#"><img src="img/5.png"></a></div>
</div>

CSS


.center {
  width: 300px;
  margin: 0 auto;
}
.center img {
  width: 100%;
  height: auto;
}
.slick-prev:before,
.slick-next:before {
  color: #777;
  font-size: 28px;
}
.slick-prev,
.slick-next {
  display: inline-block;
  height: 40px;
}
.slick-prev:before {
  content: '<';
}
.slick-next:before {
  content: '>';
}
.slick-dots li button:before {
  font-size: 28px;
}
@media (min-width: 480px) {
.center {
  width: 480px;
}
.slick-next {
  right: 10px;
  z-index: 100;
}
.slick-prev {
  left: 10px;
  z-index: 100;
}
/* ** */}
@media (min-width: 768px) {
.center {
  width: 800px;
}
.slick-next {
  right: 30px;
}
.slick-prev {
  left: 30px;
}
/* ** */}

JavaScript

サンプルデモ3-1のJavaScriptはこちらです。こちらも他サンプルデモと同じく次のコードを</body>直前に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="slick.min.js"></script>
<script>
$(function() {
$('.center').slick({
centerMode: true,
centerPadding:'100px',
slidesToShow: 1,
infinite: true,
dots:true,
autoplay:false,
responsive: [{
breakpoint: 768,
settings: {
centerMode: true,
centerPadding:'40px'
}
},
{
breakpoint: 480,
settings: {
centerMode: false
}
}]
});
});
</script>

サンプルデモ3-2のJavaScriptはこちらです。サンプルデモ3-1と同じく次のコードを</body>直前に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="slick.min.js"></script>
<script>
$('.center').slick({
centerMode: true,
centerPadding:'100px',
slidesToShow: 1,
infinite: true,
dots:true,
autoplay:true,
autoplaySpeed: 5000,
speed: 1000,
responsive: [{
breakpoint: 768,
settings: {
centerMode: true,
centerPadding:'40px'
}
},
{
breakpoint: 480,
settings: {
centerMode: false
}
}]
});
</script>

Result

サンプルデモ3-1・サンプルデモ3-2はこちら

HTMLのクラス名をcenterに変更することを忘れずに。

サンプルデモ3-1とサンプルデモ3-2のHTMLとCSSは共通です。

4. サンプル(slider-for・slider-nav)

HTML

他サンプルデモと同じくslick.cssとslick-theme.cssを<head>内に読み込みます。


<link rel="stylesheet" href="slick.css">
<link rel="stylesheet" href="slick-theme.css">

こちらも他サンプルデモと同じく次のHTMLを<body>内に読み込みます。

クラス名をslider-forとslider-navに変更します。


<div class="slider slider-for">
<div><a href="#"><img src="img/1.png"></a></div>
<div><a href="#"><img src="img/2.png"></a></div>
<div><a href="#"><img src="img/3.png"></a></div>
<div><a href="#"><img src="img/4.png"></a></div>
<div><a href="#"><img src="img/5.png"></a></div>
</div>
<div class="slider slider-nav">
<div><img src="img/1.png"></div>
<div><img src="img/2.png"></div>
<div><img src="img/3.png"></div>
<div><img src="img/4.png"></div>
<div><img src="img/5.png"></div>
</div>

CSS


.slider-for {
  width: 300px;
  margin: 0 auto;
}
.slider-for img {
  width: 100%;
  height: auto;
}
.slider-nav,
.slider-nav2 {
  margin: 10px auto 0 auto;
  cursor: pointer;
}
.slider-nav img {
  width: 100%;
  height: auto;
}
.slick-prev:before,
.slick-next:before {
  color: #777;
  font-size: 28px;
}
.slick-prev,
.slick-next {
  display: inline-block;
  height: 40px;
}
.slick-prev:before {
  content: '<';
}
.slick-next:before {
  content: '>';
}
/*.slick-dots li button:before {
	font-size: 28px;
}*/
@media (min-width: 480px) {
.slider-for {
  width: 480px;
}
.slider-nav {
  width: 480px;
}
.slick-next {
  right: 10px;
  z-index: 100;
}
.slick-prev {
  left: 10px;
  z-index: 100;
}
/* ** */}
@media (min-width: 768px) {
.slider-for {
  width: 800px;
}
.slider-nav {
  width: 800px;
}
.slick-next {
  right: 15px;
}
.slick-prev {
  left: 15px;
}
/* ** */}

JavaScript

サンプルデモ4-1のJavaScriptはこちらです。こちらも他サンプルデモと同じく次のコードを</body>直前に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="slick.min.js"></script>
<script>
$(function() {
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
centerMode: true,
focusOnSelect: true
});
});
</script>

サンプルデモ4-2のJavaScriptはこちらです。サンプルデモ4-1と同じく次のコードを</body>直前に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="slick.min.js"></script>
<script>
$(function() {
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
centerMode: true,
focusOnSelect: true,
autoplay: true,
autoplaySpeed: 5000,
speed: 1000
});
});
</script>

Result

サンプルデモ4-1・サンプルデモ4-2はこちら

HTMLのクラス名をslider-forとslider-navに変更することを忘れずに。

サンプルデモ4-1とサンプルデモ4-2のHTMLとCSSは共通です。

slickでできるカルーセルスライダーは大体こんな感じですね。あとはスライドする画像の枚数を変えたり、自動でスクロールさせるなどオプションを変更して色々と試してみてください。

9月更新・前月(8月)の人気記事トップ10 09/02/2024