menu
menu

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

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook65
  • はてなブックマーク5
  • Google+1
  • Pocket0
  • Twitter4

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

  • Labs

jQuery

こんにちは(・∀・)

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

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

ファイルのダウンロード

 次のプラグイン配布元からファイルをダウンロードします。
 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)

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


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 only screen and (min-width: 480px) {
.single-item {
	width: 480px;
	height: 270px;
}
/* ** */}
@media only screen and (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.0/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.0/jquery.min.js"></script>
<script src="slick.min.js"></script>
<script>
$(function() {
$('.single-item').slick({
dots:true,
autoplay: true,
autoplaySpeed: 5000,
speed: 2000
});
});
</script>

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


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


2. サンプルデモ(multiple-items)

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


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 only screen and (min-width: 480px) {
.multiple-items {
	width: 480px;
}
/* ** */}
@media only screen and (min-width: 768px) {
.multiple-items {
	width: 800px;
}
/* ** */}
JavaScript

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


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/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.0/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>

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


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


3. サンプルデモ(center)

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


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 only screen and (min-width: 480px) {
.center {
	width: 480px;
}
.slick-next {
	right: 10px;
	z-index: 100;
}
.slick-prev {
	left: 10px;
	z-index: 100;
}
/* ** */}
@media only screen and (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.0/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.0/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>

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


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


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

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


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 {
	width: 100px;
	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 only screen and (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 only screen and (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.0/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.0/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>

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


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


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


関連リンク

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

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

  • カテゴリー:Labs
  • facebook65
  • はてなブックマーク5
  • Google+1
  • Pocket0
  • Twitter4