menu
menu

キーワード検索

 

前月(10月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 7↑) 【HTML5】HTML5・ページ作成の基本
  5. ( 6↑)【jQuery入門】jQueryで日時を表示
  6. ( 5↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 4↓) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  8. ( 8-) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. (10-) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション

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

  • Labs

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

こんにちは(・∀・)

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

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

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

Contents

  1. single-item
  2. multiple-items
  3. center
  4. 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でできるカルーセルスライダーは大体こんな感じですね。あとはスライドする画像の枚数を変えたり、自動でスクロールさせるなどオプションを変更して色々と試してみてください。

関連リンク

【simplyScroll v2】スマホ対応レスポンシブなカルーセルスライダー
【jCarouselLite】スマホ対応レスポンシブなカルーセルスライダー

  • カテゴリー:Labs