HTML-CSS 入門講座

HTML-CSS 入門講座

WebParts-1
スライダー

目次

P1.1 はじめに

P1.1.1 概要

スライダーは、複数枚の画像を次々と切り替えて表示する機能です。クロスフェードで切り替わるものや上下や左右にスライドして切り替わるものや回転など複雑な動きをするものなど様々な表示形式があります。スライドショーとかカルーセルとも呼ばれます。

P1.2 スライダー

P1.2.1 bxSlider-1

(1) 説明

  • bxSlider を使用したコンテンツスライダーです。
  • bxSlider は、シンプルな機能でファイル容量も小さく軽量設計になっています。
  • 横方向にスライドする型式のスライダー設定にしました。

(2) 表示形式

  • 写真のスライダー表示を確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • コンテンツスライダー(bxSlider)
    公式サイト:bxSlider(https://bxslider.com/)
    CDN(JS):https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js
    CDN(CSS):https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.css
    CDN(GIF):https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/images/bx_loader.gif
    CDN(PNG):https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/images/controls.png

(4) 実装手順

  1. jQuery の公式サイトから jQuery のダウンロードを行います。公式サイトで「Doownload jQuery」ボタンをクリックして「Download the compressed, production jQuery x.x.x」のところでマウスの右クリックを行い「名前を付けてリンク先を保存 ...」を選択してファイルを保存してください。既に jQuery をダウンロード済みの場合および CDN を利用する場合は、本作業は不要です。
  2. bxSlider の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「Install」メニューをクリックして「The Other Ways」の「Manual」にある「Download jquery.bxslider.zip here」をクリックしてダウンロードしてください。CDN を利用する場合は、本作業は不要です。
  3. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。bxSlider のダウンロード媒体の中にある「dist」フォルダを開発フォルダにコピーしてフォルダ名を「bxslider」に変更してください。また、スライダーの対象にする画像ファイルを「images」フォルダにコピーしてください。
  4. head タグ内に「bxslider/jquery.bxslider.css」の link タグ(※1)を記述してください。
  5. スタイル定義(※2)を スタイルシート(CSS)ファイルに記述してください。最大の横幅指定は、作成するサイトに合わせて変更してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート(CSS)ファイルに記述してください。
  6. HTML ファイルの対象領域に表示定義(※3)を記述してください。
  7. /body タグの直前に動作指示スクリプト(※4)を記述してください。オプション指示は適時変更してください。jQuery を導入するための script タグは、jQuery を導入済の場合は、削除してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 01-slider/21-bxslider-1
    • index.html
    • bxslider(bxSlider のダウンロードファイル内の「dist」フォルダをコピーして名前を変更してください)
    • images
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
    • js
      • jquery-3.6.0.min.js
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー(bxslider)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから)(※1) ▼▼▼ -->
<link rel="stylesheet" href="bxslider/jquery.bxslider.css" type="text/css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px 10px 30px 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* スライダー(bxslider)の設定 */
.bx-wrapper {							/* スライダー領域の設定 */
	max-width: 960px;
	margin: 0 auto;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<!-- スライダー(bxslider)の定義 -->
	<div class="bx-wrapper">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
		<ul class="bxslider">
			<li><img src="images/sample-01.jpg" alt="サンプル01"></li>
			<li><img src="images/sample-02.jpg" alt="サンプル02"></li>
			<li><img src="images/sample-03.jpg" alt="サンプル03"></li>
			<li><img src="images/sample-04.jpg" alt="サンプル04"></li>
			<li><img src="images/sample-05.jpg" alt="サンプル05"></li>
		</ul>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
	</div>
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- スライダー(bxslider)の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="bxslider/jquery.bxslider.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
	 $('.bxslider').bxSlider({			// スライダーの開始指示
		auto: true,						// 自動再生(false/true)(初期値:false)
		slideWidth: 0,					// スライド幅(初期値:0)
		slideMargin: 0,					// スライド間の隙間(初期値:0)
		mode: 'horizontal',				// 表示モード('horizontal'/'vertical'/'fade')(初期値:'horizontal')
		speed: 1000,					// 切り替えスピード(初期値:500ms)
		startSlide: 0,					// 開始スライド番号(初期値:0)
		randomStart: false,				// ランダム表示(false/true)(初期値:false)
	});
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P1.2.2 bxSlider-2

(1) 説明

  • bxSlider を使用したコンテンツスライダーです。
  • bxSlider は、シンプルな機能でファイル容量も小さく軽量設計になっています。
  • 縦方向にスライドする型式のスライダー設定にしました。

(2) 表示形式

  • 写真のスライダー表示を確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • コンテンツスライダー(bxSlider)
    公式サイト:bxSlider(https://bxslider.com/)
    CDN(JS):https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js
    CDN(CSS):https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.css
    CDN(GIF):https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/images/bx_loader.gif
    CDN(PNG):https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/images/controls.png

(4) 実装手順

  1. jQuery の公式サイトから jQuery のダウンロードを行います。公式サイトで「Doownload jQuery」ボタンをクリックして「Download the compressed, production jQuery x.x.x」のところでマウスの右クリックを行い「名前を付けてリンク先を保存 ...」を選択してファイルを保存してください。既に jQuery をダウンロード済みの場合および CDN を利用する場合は、本作業は不要です。
  2. bxSlider の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「Install」メニューをクリックして「The Other Ways」の「Manual」にある「Download jquery.bxslider.zip here」をクリックしてダウンロードしてください。CDN を利用する場合は、本作業は不要です。
  3. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。bxSlider のダウンロード媒体の中にある「dist」フォルダを開発フォルダにコピーしてフォルダ名を「bxslider」に変更してください。また、スライダーの対象にする画像ファイルを「images」フォルダにコピーしてください。
  4. head タグ内に「bxslider/jquery.bxslider.css」の link タグ(※1)を記述してください。
  5. スタイル定義(※2)を スタイルシート(CSS)ファイルに記述してください。最大の横幅指定は、作成するサイトに合わせて変更してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート(CSS)ファイルに記述してください。
  6. HTML ファイルの対象領域に表示定義(※3)を記述してください。
  7. /body タグの直前に動作指示スクリプト(※4)を記述してください。オプション指示は適時変更してください。jQuery を導入するための script タグは、jQuery を導入済の場合は、削除してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 01-slider/21-bxslider-2
    • index.html
    • bxslider(bxSlider のダウンロードファイル内の「dist」フォルダをコピーして名前を変更してください)
    • images
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
    • js
      • jquery-3.6.0.min.js
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー(bxslider)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから)(※1) ▼▼▼ -->
<link rel="stylesheet" href="bxslider/jquery.bxslider.css" type="text/css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px 10px 30px 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* スライダー(bxslider)の設定 */
.bx-wrapper {							/* スライダー領域の設定 */
	max-width: 960px;
	margin: 0 auto;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<!-- スライダー(bxslider)の定義 -->
	<div class="bx-wrapper">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
		<ul class="bxslider">
			<li><img src="images/sample-01.jpg" alt="サンプル01"></li>
			<li><img src="images/sample-02.jpg" alt="サンプル02"></li>
			<li><img src="images/sample-03.jpg" alt="サンプル03"></li>
			<li><img src="images/sample-04.jpg" alt="サンプル04"></li>
			<li><img src="images/sample-05.jpg" alt="サンプル05"></li>
		</ul>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
	</div>
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- スライダー(bxslider)の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="bxslider/jquery.bxslider.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
	 $('.bxslider').bxSlider({			// スライダーの開始指示
		auto: true,						// 自動再生(false/true)(初期値:false)
		slideWidth: 0,					// スライド幅(初期値:0)
		slideMargin: 0,					// スライド間の隙間(初期値:0)
		mode: 'vertical',				// 表示モード('horizontal'/'vertical'/'fade')(初期値:'horizontal')
		speed: 1000,					// 切り替えスピード(初期値:500ms)
		startSlide: 0,					// 開始スライド番号(初期値:0)
		randomStart: false,				// ランダム表示(false/true)(初期値:false)
	});
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P1.2.3 bxSlider-3

(1) 説明

  • bxSlider を使用したコンテンツスライダーです。
  • bxSlider は、シンプルな機能でファイル容量も小さく軽量設計になっています。
  • フェードイン/フェードアウトする型式のスライダー設定にしました。

(2) 表示形式

  • 写真のフェードイン/フェードアウト表示を確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • コンテンツスライダー(bxSlider)
    公式サイト:bxSlider(https://bxslider.com/)
    CDN(JS):https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js
    CDN(CSS):https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.css
    CDN(GIF):https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/images/bx_loader.gif
    CDN(PNG):https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/images/controls.png

(4) 実装手順

  1. jQuery の公式サイトから jQuery のダウンロードを行います。公式サイトで「Doownload jQuery」ボタンをクリックして「Download the compressed, production jQuery x.x.x」のところでマウスの右クリックを行い「名前を付けてリンク先を保存 ...」を選択してファイルを保存してください。既に jQuery をダウンロード済みの場合および CDN を利用する場合は、本作業は不要です。
  2. bxSlider の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「Install」メニューをクリックして「The Other Ways」の「Manual」にある「Download jquery.bxslider.zip here」をクリックしてダウンロードしてください。CDN を利用する場合は、本作業は不要です。
  3. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。bxSlider のダウンロード媒体の中にある「dist」フォルダを開発フォルダにコピーしてフォルダ名を「bxslider」に変更してください。また、スライダーの対象にする画像ファイルを「images」フォルダにコピーしてください。
  4. head タグ内に「bxslider/jquery.bxslider.css」の link タグ(※1)を記述してください。
  5. スタイル定義(※2)を スタイルシート(CSS)ファイルに記述してください。最大の横幅指定は、作成するサイトに合わせて変更してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート(CSS)ファイルに記述してください。
  6. HTML ファイルの対象領域に表示定義(※3)を記述してください。
  7. /body タグの直前に動作指示スクリプト(※4)を記述してください。オプション指示は適時変更してください。jQuery を導入するための script タグは、jQuery を導入済の場合は、削除してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 01-slider/21-bxslider-3
    • index.html
    • bxslider(bxSlider のダウンロードファイル内の「dist」フォルダをコピーして名前を変更してください)
    • images
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
    • js
      • jquery-3.6.0.min.js
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー(bxslider)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから)(※1) ▼▼▼ -->
<link rel="stylesheet" href="bxslider/jquery.bxslider.css" type="text/css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px 10px 30px 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* スライダー(bxslider)の設定 */
.bx-wrapper {							/* スライダー領域の設定 */
	max-width: 960px;
	margin: 0 auto;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<!-- スライダー(bxslider)の定義 -->
	<div class="bx-wrapper">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
		<ul class="bxslider">
			<li><img src="images/sample-01.jpg" alt="サンプル01"></li>
			<li><img src="images/sample-02.jpg" alt="サンプル02"></li>
			<li><img src="images/sample-03.jpg" alt="サンプル03"></li>
			<li><img src="images/sample-04.jpg" alt="サンプル04"></li>
			<li><img src="images/sample-05.jpg" alt="サンプル05"></li>
		</ul>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
	</div>
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- スライダー(bxslider)の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="bxslider/jquery.bxslider.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
	 $('.bxslider').bxSlider({			// スライダーの開始指示
		auto: true,						// 自動再生(false/true)(初期値:false)
		slideWidth: 0,					// スライド幅(初期値:0)
		slideMargin: 0,					// スライド間の隙間(初期値:0)
		mode: 'fade',					// 表示モード('horizontal'/'vertical'/'fade')(初期値:'horizontal')
		speed: 1000,					// 切り替えスピード(初期値:500ms)
		startSlide: 0,					// 開始スライド番号(初期値:0)
		randomStart: false,				// ランダム表示(false/true)(初期値:false)
	});
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P1.2.4 slick-1

(1) 説明

  • slick を使用したコンテンツスライダーです。
  • slick は、豊富なオプション設定を持っています。
  • 横方向にスライドする型式のスライダー設定にしました。

(2) 表示形式

  • 写真のスライダー表示を確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • コンテンツスライダー(slick)
    公式サイト:slick(http://kenwheeler.github.io/slick/)
    CDN(JS):https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js
    CDN(CSS):https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css

(4) 実装手順

  1. jQuery の公式サイトから jQuery のダウンロードを行います。公式サイトで「Doownload jQuery」ボタンをクリックして「Download the compressed, production jQuery x.x.x」のところでマウスの右クリックを行い「名前を付けてリンク先を保存 ...」を選択してファイルを保存してください。既に jQuery をダウンロード済みの場合および CDN を利用する場合は、本作業は不要です。
  2. slick の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「get it now」メニューをクリックして「Download Now」ボタンをクリックしてダウンロードしてください。CDN を利用する場合は、本作業は不要です。
  3. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。slick のダウンロード媒体の中にある「slick」フォルダを開発フォルダにコピーしてください。また、スライダーの対象にする画像ファイルを「images」フォルダにコピーしてください。
  4. head タグ内に「slick/slick.css」と「slick/slick-theme.css」の link タグ(※1)を記述してください。
  5. スタイル定義(※2)を スタイルシート(CSS)ファイルに記述してください。最大の横幅指定は、作成するサイトに合わせて変更してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート(CSS)ファイルに記述してください。
  6. HTML ファイルの対象領域に表示定義(※3)を記述してください。
  7. /body タグの直前に動作指示スクリプト(※4)を記述してください。オプション指示は適時変更してください。jQuery を導入するための script タグは、jQuery を導入済の場合は、削除してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 01-slider/24-slick-1
    • index.html
    • images
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
    • js
      • jquery-3.6.0.min.js
    • slick(slick のダウンロードファイル内の「slick」フォルダをコピーしてください)
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー(slick)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから)(※1) ▼▼▼ -->
<link href="slick/slick.css" rel="stylesheet" type="text/css">
<link href="slick/slick-theme.css" rel="stylesheet" type="text/css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px 40px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* スライダー(slick)の設定 */
.slick-slider {
	max-width: 900px;
	margin: 0 auto;
}
.slider img{
	height: auto;
	width: 100%;
	margin: 0 auto;
}
.slick-prev:before, .slick-next:before {
	color: #000;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- スライダー(slick)の定義 -->
	<ul class="slider slick-slider">
		<li><img src="images/sample-01.jpg" alt="サンプル01"></li>
		<li><img src="images/sample-02.jpg" alt="サンプル02"></li>
		<li><img src="images/sample-03.jpg" alt="サンプル03"></li>
		<li><img src="images/sample-04.jpg" alt="サンプル04"></li>
		<li><img src="images/sample-05.jpg" alt="サンプル05"></li>
	</ul>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- スライダー(slick)制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="slick/slick.min.js" type="text/javascript"></script>
<script>
$('.slider').slick({					// スライダー開始指示
	autoplay: true,
	autoplaySpeed: 2000,
	dots: true,
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P1.2.5 slick-2

(1) 説明

  • slick を使用したコンテンツスライダーです。
  • slick は、豊富なオプション設定を持っています。
  • 前後のコンテンツの一部表示と中心コンテンツの拡大表示する型式のスライダー設定にしました。

(2) 表示形式

  • 写真のスライダー表示を確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • コンテンツスライダー(slick)
    公式サイト:slick(http://kenwheeler.github.io/slick/)
    CDN(JS):https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js
    CDN(CSS):https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css

(4) 実装手順

  1. jQuery の公式サイトから jQuery のダウンロードを行います。公式サイトで「Doownload jQuery」ボタンをクリックして「Download the compressed, production jQuery x.x.x」のところでマウスの右クリックを行い「名前を付けてリンク先を保存 ...」を選択してファイルを保存してください。既に jQuery をダウンロード済みの場合および CDN を利用する場合は、本作業は不要です。
  2. slick の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「get it now」メニューをクリックして「Download Now」ボタンをクリックしてダウンロードしてください。CDN を利用する場合は、本作業は不要です。
  3. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。slick のダウンロード媒体の中にある「slick」フォルダを開発フォルダにコピーしてください。また、スライダーの対象にする画像ファイルを「images」フォルダにコピーしてください。
  4. head タグ内に「slick/slick.css」と「slick/slick-theme.css」の link タグ(※1)を記述してください。
  5. スタイル定義(※2)を スタイルシート(CSS)ファイルに記述してください。最大の横幅指定は、作成するサイトに合わせて変更してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート(CSS)ファイルに記述してください。
  6. HTML ファイルの対象領域に表示定義(※3)を記述してください。
  7. /body タグの直前に動作指示スクリプト(※4)を記述してください。オプション指示は適時変更してください。jQuery を導入するための script タグは、jQuery を導入済の場合は、削除してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 01-slider/25-slick-2
    • index.html
    • images
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
    • js
      • jquery-3.6.0.min.js
    • slick(slick のダウンロードファイル内の「slick」フォルダをコピーしてください)
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー(slick)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから)(※1) ▼▼▼ -->
<link href="slick/slick.css" rel="stylesheet" type="text/css">
<link href="slick/slick-theme.css" rel="stylesheet" type="text/css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* スライダー(slick)の設定 */
.slider img{
	height: auto;
	width: 100%;
	margin: 0 auto;
}
.slick-slide img {
	width: 100%;
}
.slick-slide {
	transition: 0.3s ease-in-out;
	transform: scale(0.75);
}
.is--active {
	transform: scale(1);
}
.slick-prev:before, .slick-next:before {
	color: #000;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- スライダー(slick)の定義 -->
	<ul class="slider slick-slider">
		<li><img src="images/sample-01.jpg" alt="サンプル01"></li>
		<li><img src="images/sample-02.jpg" alt="サンプル02"></li>
		<li><img src="images/sample-03.jpg" alt="サンプル03"></li>
		<li><img src="images/sample-04.jpg" alt="サンプル04"></li>
		<li><img src="images/sample-05.jpg" alt="サンプル05"></li>
	</ul>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- スライダー(slick)制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="slick/slick.min.js" type="text/javascript"></script>
<script>
$('.slider').slick({
	autoplay: true,
	dots: true,
	arrows: false,
	centerMode: true,
	centerPadding: '25%',
});
$('.slider').on('beforeChange', function(){
	$('.slick-current').removeClass('is--active');
});
$('.slick-current').addClass('is--active');
$('.slider').on('afterChange', function(){
	$('.slick-current').addClass('is--active');
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P1.2.6 slick-3

(1) 説明

  • slick を使用したコンテンツスライダーです。
  • slick は、豊富なオプション設定を持っています。
  • 表示領域全体を使用し前後への移動ボタンもカスタマイズした型式のスライダー設定にしました。

(2) 表示形式

  • 写真のスライダー表示を確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • コンテンツスライダー(slick)
    公式サイト:slick(http://kenwheeler.github.io/slick/)
    CDN(JS):https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js
    CDN(CSS):https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css

(4) 実装手順

  1. jQuery の公式サイトから jQuery のダウンロードを行います。公式サイトで「Doownload jQuery」ボタンをクリックして「Download the compressed, production jQuery x.x.x」のところでマウスの右クリックを行い「名前を付けてリンク先を保存 ...」を選択してファイルを保存してください。既に jQuery をダウンロード済みの場合および CDN を利用する場合は、本作業は不要です。
  2. slick の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「get it now」メニューをクリックして「Download Now」ボタンをクリックしてダウンロードしてください。CDN を利用する場合は、本作業は不要です。
  3. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。slick のダウンロード媒体の中にある「slick」フォルダを開発フォルダにコピーしてください。また、スライダーの対象にする画像ファイルを「images」フォルダにコピーしてください。
  4. head タグ内に「slick/slick.css」の link タグ(※1)を記述してください。
  5. スタイル定義(※2)を スタイルシート(CSS)ファイルに記述してください。スライダーの対象にする画像ファイルの指定を背景画像として指定してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート(CSS)ファイルに記述してください。
  6. HTML ファイルの対象領域に表示定義(※3)を記述してください。
  7. /body タグの直前に動作指示スクリプト(※4)を記述してください。オプション指示は適時変更してください。jQuery を導入するための script タグは、jQuery を導入済の場合は、削除してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 01-slider/26-slick-3
    • index.html
    • images
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
    • js
      • jquery-3.6.0.min.js
    • slick(slick のダウンロードファイル内の「slick」フォルダをコピーしてください)
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー(slick)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから)(※1) ▼▼▼ -->
<link rel="stylesheet" type="text/css" href="slick/slick.css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label,button {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
/*
.container {
	padding: 0px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* スライダー(slick)の設定 */
.wrapper {
	position: relative;
}
.slider {
	position: relative;
	z-index: 1;
	height: 100vh;
}
/* 画像設定 */
.slider-item01 {
	background: url(images/sample-1024x768-01.jpg);
}
.slider-item02 {
	background: url(images/sample-1024x768-02.jpg);
}
.slider-item03 {
	background: url(images/sample-1024x768-03.jpg);
}
.slider-item04 {
	background: url(images/sample-1024x768-04.jpg);
}
.slider-item {
	width: 100%;
	height:100vh;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* 矢印の設定 */
.slick-prev, 
.slick-next {
	position: absolute;
	z-index: 3;
	top: 42%;
	cursor: pointer;
	outline: none;
	border-top: 3px solid #ccc;
	border-right: 3px solid #ccc;
	height: 25px;
	width: 25px;
}
.slick-prev {
	left:2.5%;
	transform: rotate(-135deg);
}
.slick-next {
	right:2.5%;
	transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/
.slick-dots {
	position: relative;
	z-index: 3;
	text-align:center;
	margin:-50px 0 0 0;
}
.slick-dots li {
	display: inline-block;
	margin:0 5px;
}
.slick-dots button {
	color: transparent;
	outline: none;
	width: 8px;
	height: 8px;
	display: block;
	border-radius: 50%;
	background: #ccc;
}

.slick-dots .slick-active button{
	background:#333;
}
.main {
  background: #dbffff;
}
.main p {
  padding: 300px 0; 
  text-align: center;
  color: #333;
}
p.message {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 6vw;
  color: #fff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */

</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- スライダー(slick)の定義 -->
	<div class="wrapper">
		<p class="message">スライドショー</p>
		<ul class="slider">
			<li class="slider-item slider-item01"></li>
			<li class="slider-item slider-item02"></li>
			<li class="slider-item slider-item03"></li>
			<li class="slider-item slider-item04"></li>
		</ul>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
	<div class="main">
		<p>スクロールしたら見える部分</p>
	</div>
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- スライダー(slick)の制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="slick/slick.min.js"></script>
<script>
$('.slider').slick({
	autoplay: true,									// 自動的に動き出す
	autoplaySpeed: 3000,							// 切り替わる待ち時間
	speed:1000,										// スライドのスピード
	infinite: true,									// 繰り返し有り
	slidesToShow: 1,								// 画面に見せるスライド数
	slidesToScroll: 1,								// 1回のスクロールで移動する枚数
	arrows: true,									// 左右の矢印あり
	prevArrow: '<div class="slick-prev"></div>',	// 矢印部分PreviewのHTMLを変更
	nextArrow: '<div class="slick-next"></div>',	// 矢印部分NextのHTMLを変更
	dots: true,										// 下部ドットナビゲーション表示有り
	pauseOnFocus: false,							// フォーカスで一時停止を無効
	pauseOnHover: false,							// /マウスホバーで一時停止を無効
	pauseOnDotsHover: false,						// ドットナビゲーションのマウスホバーで一時停止を無効
});
// スマホ用:スライダーをタッチしても止めずにスライドをさせたい場合
$('.slider').on('touchmove', function(event, slick, currentSlide, nextSlide){
	$('.slider').slick('slickPlay');
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P1.2.7 slick-4

(1) 説明

  • slick を使用したコンテンツスライダーです。
  • slick は、豊富なオプション設定を持っています。
  • 横方向にスライドする型式のスライダー設定にしました。
  • 前後のコンテンツの一部を半透明表示する型式のスライダー設定にしました。

(2) 表示形式

  • 写真のスライダー表示を確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • コンテンツスライダー(slick)
    公式サイト:slick(http://kenwheeler.github.io/slick/)
    CDN(JS):https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js
    CDN(CSS):https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css

(4) 実装手順

  1. jQuery の公式サイトから jQuery のダウンロードを行います。公式サイトで「Doownload jQuery」ボタンをクリックして「Download the compressed, production jQuery x.x.x」のところでマウスの右クリックを行い「名前を付けてリンク先を保存 ...」を選択してファイルを保存してください。既に jQuery をダウンロード済みの場合および CDN を利用する場合は、本作業は不要です。
  2. slick の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「get it now」メニューをクリックして「Download Now」ボタンをクリックしてダウンロードしてください。CDN を利用する場合は、本作業は不要です。
  3. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。slick のダウンロード媒体の中にある「slick」フォルダを開発フォルダにコピーしてください。また、スライダーの対象にする画像ファイルを「images」フォルダにコピーしてください。
  4. head タグ内に「slick/slick.css」と「slick/slick-theme.css」の link タグ(※1)を記述してください。
  5. スタイル定義(※2)を スタイルシート(CSS)ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート(CSS)ファイルに記述してください。
  6. HTML ファイルの対象領域に表示定義(※3)を記述してください。
  7. /body タグの直前に動作指示スクリプト(※4)を記述してください。オプション指示は適時変更してください。jQuery を導入するための script タグは、jQuery を導入済の場合は、削除してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 01-slider/27-slick-4
    • index.html
    • images
      • ajax-loader.gif
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
    • js
      • jquery-3.6.0.min.js
    • slick(slick のダウンロードファイル内の「slick」フォルダをコピーしてください)
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー(slick)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから)(※1) ▼▼▼ -->
<link rel="stylesheet" type="text/css" href="slick/slick.css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,ol,li,label,button {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}

.container {
	padding: 0px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* スライダー(slick)の設定 */
.wrapper {
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
}
.slider {
	overflow: visible;
	max-width: 70%;
	margin: 0 auto;
}
.slider .slick-list {
	overflow: visible;
}

.slick-slide {
	margin: 0 5px;
}
.slick-slide img {
	width: 100%;
	height: auto;
}

.slick-prev,
.slick-next {
	z-index: 1;
}
.slick-prev:before,
.slick-next:before {
	color: #000;
}
.slick-slide {
	transition: all ease-in-out 0.3s;
	opacity: 0.4;
}
.slick-active {
	opacity: 1;
}
.slick-current {
	opacity: 1;
}

/* 矢印の設定 */
.slick-prev, 
.slick-next {
	position: absolute;
	z-index: 3;
	top: 42%;
	cursor: pointer;
	outline: none;
	border-top: 3px solid #888;
	border-right: 3px solid #888;
	height: 1.5vw;
	width: 1.5vw;
}
.slick-prev {
	left: 0%;
	transform: rotate(-135deg);
}
.slick-next {
	right: 0%;
	transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/
.slick-dots {
	position: relative;
	z-index: 3;
	text-align: center;
	margin: 15px 0 0 0;
}
.slick-dots li {
	display: inline-block;
	margin: 0 5px;
}
.slick-dots button {
	color: transparent;
	outline: none;
	width: 0.6vw;
	height: 0.6vw;
	display: block;
	border-radius: 50%;
	background: #ccc;
}
.slick-dots .slick-active button{
	background: #333;
}

.main {
  background: #dbffff;
}
.main p {
  padding: 300px 0; 
  text-align: center;
  color: #333;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */

</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- スライダー(slick)の定義 -->
	<div class="wrapper">
		<div class="slider">
		<div><img src="images/sample-1024x768-01.jpg" alt="sample01"></div>
		<div><img src="images/sample-1024x768-02.jpg" alt="sample02"></div>
		<div><img src="images/sample-1024x768-03.jpg" alt="sample03"></div>
		<div><img src="images/sample-1024x768-04.jpg" alt="sample04"></div>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
	<div class="main">
		<p>メインコンテンツ</p>
	</div>
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- スライダー(slick)の制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="slick/slick.min.js"></script>
<script>
$(".slider").slick({
	autoplay: true, 								// 自動再生
	autoplaySpeed: 3000, 							// 自動再生のスピード(ミリ秒単位)
	speed: 1000, 									// スライド/フェードアニメーション速度
	centerMode: true, 								// スライドを中心に表示して部分的に前後のスライドが見えるように設定
	centerPadding: '5%', 							// センターモード時のサイドパディング
	dots: true, 									// ドットインジケーターの表示
	infinite: true, 								// 繰り返しあり
	prevArrow: '<div class="slick-prev"></div>',	// Prev用矢印のHTML
	nextArrow: '<div class="slick-next"></div>',	// Next用矢印のHTML
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P1.2.8 crossfade-1

(1) 説明

  • jQuery だけで実現したクロスフェード型のコンテンツスライダーです。

(2) 表示形式

  • 写真のクロスフェード表示を確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • 使用しません。

(4) 実装手順

  1. jQuery の公式サイトから jQuery のダウンロードを行います。公式サイトで「Doownload jQuery」ボタンをクリックして「Download the compressed, production jQuery x.x.x」のところでマウスの右クリックを行い「名前を付けてリンク先を保存 ...」を選択してファイルを保存してください。既に jQuery をダウンロード済みの場合および CDN を利用する場合は、本作業は不要です。
  2. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。スライダーの対象にする画像ファイルを「images」フォルダにコピーしてください。
  3. crossfade のスタイル定義(※2)を スタイルシート(CSS)ファイルに記述してください。最大の横幅指定は、作成するサイトに合わせて変更してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート(CSS)ファイルに記述してください。
  4. HTML ファイルの対象領域に表示定義(※3)を記述してください。
  5. /body タグの直前に動作指示スクリプト(※4)を記述してください。jQuery を導入するための script タグは、jQuery を導入済の場合は、削除してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 01-slider/28-crossfade-1
    • index.html
    • images
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
    • js
      • jquery-3.6.0.min.js
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー(crossfade)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
img {
	width: 100%;
	vertical-align: middle;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* スライダー(crossfade)の設定 */
#slide {
	width: 100%;
	margin: 0 auto;
	list-style-type: none;
}
#slide ul {
	position: relative;
	width: 100%;
	list-style-type: none;
}
#slide ul li {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
#slide ul li img {
	width: 100%;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- スライダー(crossfade)の定義 -->
	<div id="slide">
		<ul>
			<li><img src="images/sample-01.jpg" alt="サンプル01"></li>
			<li><img src="images/sample-02.jpg" alt="サンプル02"></li>
			<li><img src="images/sample-03.jpg" alt="サンプル03"></li>
			<li><img src="images/sample-04.jpg" alt="サンプル04"></li>
			<li><img src="images/sample-05.jpg" alt="サンプル05"></li>
		</ul>
	</div>
	<!-- body枠を確保するためにダミーで記述 -->
	<div><img src="images/sample-01.jpg" alt="サンプル01"></div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- スライダー(crossfade)制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$(function() {
	var interval = 5000;				// 切り替わりの間隔(ミリ秒)
	var fade_speed = 2000;				// フェード処理の早さ(ミリ秒)
	$("#slide ul li").css({"position":"relative"});
	$("#slide ul li").hide().css({"position":"absolute", "top":0, "left":0});
	$("#slide ul li:first").addClass("active").show();
	setInterval(function() {
		var active = $("#slide ul li.active");
		var next = active.next("li").length ? active.next("li") : $("#slide ul li:first");
		active.fadeOut(fade_speed).removeClass("active");
		next.fadeIn(fade_speed).addClass("active");
	},interval);
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P1.2.9 swiper-1

(1) 説明

  • swiper を使用したコンテンツスライダーです。
  • swiper は、jQuery を使用していませんので軽量で高速です。
  • swiper は、豊富なオプション設定を持っています。
  • 横方向に移動する型式のスライダー設定にしました。

(2) 表示形式

  • 写真のスライダー表示を確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
  • 使用しません。
個別ライブラリィ
  • コンテンツスライダー(swiper)
    公式サイト:swiper(https://swiperjs.com/)
    CDN(css):https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css
    CDN(js):https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js

(4) 実装手順

  1. swiper の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「Download assets」メニューをクリックしたら表示される URL をクリックしてて表示されるファイル一覧(「Show all」をクリック)の中から必要ファイルをファイルに保存してください。CDN を利用する場合は、本作業は不要です。
  2. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。スライダーの対象にする画像ファイルを「images」フォルダにコピーしてください。
  3. head タグ内に「css/swiper-bundle.css」の link タグ(※1)を記述してください。
  4. スタイル定義(※2)を スタイルシート(CSS)ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート(CSS)ファイルに記述してください。
  5. HTML ファイルの対象領域に表示定義(※3)を記述してください。スライダーの対象画像ファイル名は、適時変更してください。
  6. /body タグの直前に動作指示スクリプト(※4)を記述してください。オプション指示は適時変更してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 01-slider/29-swiper-1
    • index.html
    • css
      • swiper-bundle.css
    • images
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
    • js
      • swiper-bundle.min.js
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー(swiper)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから)(※1) ▼▼▼ -->
<link href="css/swiper-bundle.css" rel="stylesheet" type="text/css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* スライダー(swiper)の設定 */
:root {
	--swiper-navigation-color: #ffffff;
	--swiper-pagination-color: #ffffff;
	--swiper-pagination-bullet-inactive-color: #bbbbbb;
	--swiper-pagination-bullet-inactive-opacity: 1;
	--swiper-pagination-bullet-horizontal-gap: 8px;
	--swiper-pagination-bullet-width: 8px;
	--swiper-pagination-bullet-height: 8px;
}
.swiper {
  	max-width: 900px;
  	width: 100%;
	margin: 0 auto;
}
.swiper .swiper-wrapper {
	width: 100%;
}
.swiper .swiper-wrapper .swiper-slide img {
	width: 100%;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- スライダー(swiper)の定義 -->
	<div class="swiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><img src="images/sample-01.jpg" alt="サンプル01"></div>
			<div class="swiper-slide"><img src="images/sample-02.jpg" alt="サンプル02"></div>
			<div class="swiper-slide"><img src="images/sample-03.jpg" alt="サンプル03"></div>
			<div class="swiper-slide"><img src="images/sample-04.jpg" alt="サンプル04"></div>
			<div class="swiper-slide"><img src="images/sample-05.jpg" alt="サンプル05"></div>
		</div>
		<div class="swiper-pagination"></div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- スライダー(slick)制御 -->
<script src="js/swiper-bundle.min.js" type="text/javascript"></script>
<script>
var mySwiper = new Swiper ('.swiper', {
	loop: true,							// ループ(true/false)
	effect: 'slide',					// 形状(slide/fade/cube/coverflow/flip/creative/carsd)
										// fadeを指定した場合は「crossFade: true」を指定
	initialSlide: 0,					// 開始スライド(0が1番目)
	direction: 'horizontal',			// 方向(horizontal/vertical)
										// verticalを指定しら場合はコンテナにheight/max-heightを指定
	speed: 1000,						// スライドスピード(ミリ秒)
	autoHeight: false,					// スライドに合わせて高さを自動調整(false/true)
	spaceBetween: 0,					// スライド間の余白(px)
	slidesPerView: 1,					// 一度に表示するスライド数(数値/auto)
										// autoと「loop: true」を指定する場合は「loopedSlides」を指定
	slidesPerGroup: 1,					// 同時にスライドさせる数
	slideToClickedSlide: false,			// サムネールをクリック時にスライド移行(false/true)
	centeredSlides: false,				// アクティブスライドを中央に表示(false/trye)
	loopedSlides: null,					// 前後に複製するスライド数
	autoplay: {							// 自動再生
		delay: 2000,					// 自動再生時間(ミリ秒)
		disableOnInteraction: false		// 操作したら自動再生を停止
	},
	pagination: {						// ページネーション
		el: '.swiper-pagination',
		clickable: true,
	},
	navigation: {						// ナビゲーション
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
})
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P1.2.10 swiper-2

(1) 説明

  • swiper を使用したコンテンツスライダーです。
  • swiper は、jQuery を使用していませんので軽量で高速です。
  • swiper は、豊富なオプション設定を持っています。
  • キューブ(立方体)でスライドする型式のスライダー設定にしました。

(2) 表示形式

  • 写真のスライダー表示を確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
  • 使用しません。
個別ライブラリィ
  • コンテンツスライダー(swiper)
    公式サイト:swiper(https://swiperjs.com/)
    CDN(css):https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css
    CDN(js):https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js

(4) 実装手順

  1. swiper の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「Download assets」メニューをクリックしたら表示される URL をクリックしてて表示されるファイル一覧(「Show all」をクリック)の中から必要ファイルをファイルに保存してください。CDN を利用する場合は、本作業は不要です。
  2. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。スライダーの対象にする画像ファイルを「images」フォルダにコピーしてください。
  3. head タグ内に「css/swiper-bundle.css」の link タグ(※1)を記述してください。
  4. スタイル定義(※2)を スタイルシート(CSS)ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート(CSS)ファイルに記述してください。
  5. HTML ファイルの対象領域に表示定義(※3)を記述してください。スライダーの対象画像ファイル名は、適時変更してください。
  6. /body タグの直前に動作指示スクリプト(※4)を記述してください。オプション指示は適時変更してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 01-slider/2a-swiper-2
    • index.html
    • css
      • swiper-bundle.css
    • images
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
    • js
      • swiper-bundle.min.js
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー(swiper)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから)(※1) ▼▼▼ -->
<link href="css/swiper-bundle.css" rel="stylesheet" type="text/css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* スライダー(swiper)の設定 */
:root {
	--swiper-navigation-color: #ffffff;
	--swiper-pagination-color: #ffffff;
	--swiper-pagination-bullet-inactive-color: #bbbbbb;
	--swiper-pagination-bullet-inactive-opacity: 1;
	--swiper-pagination-bullet-horizontal-gap: 8px;
	--swiper-pagination-bullet-width: 8px;
	--swiper-pagination-bullet-height: 8px;
}
.swiper {
  	max-width: 900px;
  	width: 100%;
	margin: 0 auto;
}
.swiper .swiper-wrapper {
	width: 100%;
}
.swiper .swiper-wrapper .swiper-slide img {
	width: 100%;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- スライダー(swiper)の定義 -->
	<div class="swiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><img src="images/sample-01.jpg" alt="サンプル01"></div>
			<div class="swiper-slide"><img src="images/sample-02.jpg" alt="サンプル02"></div>
			<div class="swiper-slide"><img src="images/sample-03.jpg" alt="サンプル03"></div>
			<div class="swiper-slide"><img src="images/sample-04.jpg" alt="サンプル04"></div>
			<div class="swiper-slide"><img src="images/sample-05.jpg" alt="サンプル05"></div>
		</div>
		<div class="swiper-pagination"></div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- スライダー(slick)制御 -->
<script src="js/swiper-bundle.min.js" type="text/javascript"></script>
<script>
var mySwiper = new Swiper ('.swiper', {
	loop: true,							// ループ(true/false)
	effect: 'cube',						// 形状(slide/fade/cube/coverflow/flip/creative/carsd)
										// fadeを指定した場合は「crossFade: true」を指定
	initialSlide: 0,					// 開始スライド(0が1番目)
	direction: 'horizontal',			// 方向(horizontal/vertical)
										// verticalを指定しら場合はコンテナにheight/max-heightを指定
	speed: 2000,						// スライドスピード(ミリ秒)
	autoHeight: false,					// スライドに合わせて高さを自動調整(false/true)
	spaceBetween: 0,					// スライド間の余白(px)
	slidesPerView: 1,					// 一度に表示するスライド数(数値/auto)
										// autoと「loop: true」を指定する場合は「loopedSlides」を指定
	slidesPerGroup: 1,					// 同時にスライドさせる数
	slideToClickedSlide: false,			// サムネールをクリック時にスライド移行(false/true)
	centeredSlides: false,				// アクティブスライドを中央に表示(false/trye)
	loopedSlides: null,					// 前後に複製するスライド数
	autoplay: {							// 自動再生
		delay: 2000,					// 自動再生時間(ミリ秒)
		disableOnInteraction: false		// 操作したら自動再生を停止
	},
	pagination: {						// ページネーション
		el: '.swiper-pagination',
		clickable: true,
	},
	navigation: {						// ナビゲーション
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
})
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P1.2.11 swiper-3

(1) 説明

  • swiper を使用したコンテンツスライダーです。
  • swiper は、jQuery を使用していませんので軽量で高速です。
  • swiper は、豊富なオプション設定を持っています。
  • 横方向にスライドする型式のスライダー設定にしました。
  • スライダーの左右には、前後に表示されるコンテンツの一部表示を設定にしました。

(2) 表示形式

  • 写真のスライダー表示を確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
  • 使用しません。
個別ライブラリィ
  • コンテンツスライダー(swiper)
    公式サイト:swiper(https://swiperjs.com/)
    CDN(css):https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css
    CDN(js):https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js

(4) 実装手順

  1. swiper の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「Download assets」メニューをクリックしたら表示される URL をクリックしてて表示されるファイル一覧(「Show all」をクリック)の中から必要ファイルをファイルに保存してください。CDN を利用する場合は、本作業は不要です。
  2. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。スライダーの対象にする画像ファイルを「images」フォルダにコピーしてください。
  3. head タグ内に「css/swiper-bundle.css」の link タグ(※1)を記述してください。
  4. スタイル定義(※2)を スタイルシート(CSS)ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート(CSS)ファイルに記述してください。
  5. HTML ファイルの対象領域に表示定義(※3)を記述してください。スライダーの対象画像ファイル名は、適時変更してください。
  6. /body タグの直前に動作指示スクリプト(※4)を記述してください。オプション指示は適時変更してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 01-slider/2b-swiper-3
    • index.html
    • css
      • swiper-bundle.css
    • images
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
    • js
      • swiper-bundle.min.js
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー(swiper)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから)(※1) ▼▼▼ -->
<link href="css/swiper-bundle.css" rel="stylesheet" type="text/css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* スライダー(swiper)の設定 */
:root {
	--swiper-navigation-color: #ffffff;
	--swiper-pagination-color: #ffffff;
	--swiper-pagination-bullet-inactive-color: #bbbbbb;
	--swiper-pagination-bullet-inactive-opacity: 1;
	--swiper-pagination-bullet-horizontal-gap: 8px;
	--swiper-pagination-bullet-width: 8px;
	--swiper-pagination-bullet-height: 8px;
}
.swiper {
  	max-width: 900px;
  	width: 100%;
	margin: 0 auto;
}
.swiper .swiper-wrapper {
	width: 100%;
}
.swiper .swiper-wrapper .swiper-slide img {
	width: 100%;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- スライダー(swiper)の定義 -->
	<div class="swiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><img src="images/sample-01.jpg" alt="サンプル01"></div>
			<div class="swiper-slide"><img src="images/sample-02.jpg" alt="サンプル02"></div>
			<div class="swiper-slide"><img src="images/sample-03.jpg" alt="サンプル03"></div>
			<div class="swiper-slide"><img src="images/sample-04.jpg" alt="サンプル04"></div>
			<div class="swiper-slide"><img src="images/sample-05.jpg" alt="サンプル05"></div>
		</div>
		<div class="swiper-pagination"></div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- スライダー(slick)制御 -->
<script src="js/swiper-bundle.min.js" type="text/javascript"></script>
<script>
var mySwiper = new Swiper ('.swiper', {
	loop: true,							// ループ(true/false)
	effect: 'coverflow',				// 形状(slide/fade/cube/coverflow/flip/creative/carsd)
										// fadeを指定した場合は「crossFade: true」を指定
	initialSlide: 0,					// 開始スライド(0が1番目)
	direction: 'horizontal',			// 方向(horizontal/vertical)
										// verticalを指定しら場合はコンテナにheight/max-heightを指定
	speed: 2000,						// スライドスピード(ミリ秒)
	autoHeight: false,					// スライドに合わせて高さを自動調整(false/true)
	spaceBetween: 0,					// スライド間の余白(px)
	slidesPerView: 2,					// 一度に表示するスライド数(数値/auto)
										// autoと「loop: true」を指定する場合は「loopedSlides」を指定
	slidesPerGroup: 1,					// 同時にスライドさせる数
	slideToClickedSlide: false,			// サムネールをクリック時にスライド移行(false/true)
	centeredSlides: true,				// アクティブスライドを中央に表示(false/trye)
	loopedSlides: null,					// 前後に複製するスライド数
	autoplay: {							// 自動再生
		delay: 2000,					// 自動再生時間(ミリ秒)
		disableOnInteraction: false		// 操作したら自動再生を停止
	},
	pagination: {						// ページネーション
		el: '.swiper-pagination',
		clickable: true,
	},
	navigation: {						// ナビゲーション
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
})
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P1.2.12 swiper-4

(1) 説明

  • swiper を使用したコンテンツスライダーです。
  • swiper は、jQuery を使用していませんので軽量で高速です。
  • swiper は、豊富なオプション設定を持っています。
  • 横方向にスライドする型式のスライダー設定にしました。
  • メインスライダーの下部にサムネイル型式のスライダー表示を設定にしました。

(2) 表示形式

  • 写真のスライダー表示を確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
  • 使用しません。
個別ライブラリィ
  • コンテンツスライダー(swiper)
    公式サイト:swiper(https://swiperjs.com/)
    CDN(css):https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css
    CDN(js):https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js

(4) 実装手順

  1. swiper の公式サイトから個別ライブラリィのダウンロードを行います。公式サイトで「Download assets」メニューをクリックしたら表示される URL をクリックしてて表示されるファイル一覧(「Show all」をクリック)の中から必要ファイルをファイルに保存してください。CDN を利用する場合は、本作業は不要です。
  2. 「サンプルコード」の「ファイル配置」を参照しながら必要ファイルを配置してください。スライダーの対象にする画像ファイルを「images」フォルダにコピーしてください。
  3. head タグ内に「css/swiper-bundle.css」の link タグ(※1)を記述してください。
  4. スタイル定義(※2)を スタイルシート(CSS)ファイルに記述してください。サンプルコードでは HTML ファイル内に記述していますが実装時は、スタイルシート(CSS)ファイルに記述してください。
  5. HTML ファイルの対象領域に表示定義(※3)を記述してください。スライダーの対象画像ファイル名は、適時変更してください。
  6. /body タグの直前に動作指示スクリプト(※4)を記述してください。オプション指示は適時変更してください。

(5) サンプルコード

サンプルコード表示
(a) ファイル配置
  • 01-slider/2c-swiper-4
    • index.html
    • css
      • swiper-bundle.css
    • images
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
    • js
      • swiper-bundle.min.js
(b) ソースコード

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー(swiper)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから)(※1) ▼▼▼ -->
<link href="css/swiper-bundle.css" rel="stylesheet" type="text/css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* スライダー(swiper)の設定 */
:root {
	--swiper-navigation-color: #ffffff;
	--swiper-pagination-color: #ffffff;
	--swiper-pagination-bullet-inactive-color: #bbbbbb;
	--swiper-pagination-bullet-inactive-opacity: 1;
	--swiper-pagination-bullet-horizontal-gap: 8px;
	--swiper-pagination-bullet-width: 8px;
	--swiper-pagination-bullet-height: 8px;
}
.swiper {
  	max-width: 900px;
  	width: 100%;
	margin: 0 auto;
}
.swiper .swiper-wrapper {
	width: 100%;
}
.swiper .swiper-wrapper .swiper-slide img {
	width: 100%;
}
/* サムネイルの設定 */
.thumbs-slider .swiper-slide {
	opacity: 0.7;
}
.thumbs-slider .swiper-slide-thumb-active {
	opacity: 1;
}
.swiper-pagination-bullet-active {
	opacity: 1;
	background: #fff;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
	<!-- スライダー(swiper)の定義 -->
	<div class="swiper main-slider">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><img src="images/sample-01.jpg" alt="サンプル01"></div>
			<div class="swiper-slide"><img src="images/sample-02.jpg" alt="サンプル02"></div>
			<div class="swiper-slide"><img src="images/sample-03.jpg" alt="サンプル03"></div>
			<div class="swiper-slide"><img src="images/sample-04.jpg" alt="サンプル04"></div>
			<div class="swiper-slide"><img src="images/sample-05.jpg" alt="サンプル05"></div>
		</div>
		<div class="swiper-pagination"></div>
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
	<div class="swiper thumbs-slider">
		<div class="swiper-wrapper"> 
			<div class="swiper-slide"><img src="images/sample-01.jpg" alt="サンプル01"></div>
			<div class="swiper-slide"><img src="images/sample-02.jpg" alt="サンプル02"></div>
			<div class="swiper-slide"><img src="images/sample-03.jpg" alt="サンプル03"></div>
			<div class="swiper-slide"><img src="images/sample-04.jpg" alt="サンプル04"></div>
			<div class="swiper-slide"><img src="images/sample-05.jpg" alt="サンプル05"></div>
		</div>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- スライダー(slick)制御 -->
<script src="js/swiper-bundle.min.js" type="text/javascript"></script>
<script>
/* サムネールの制御 */
var mySwiperThumbs = new Swiper ('.thumbs-slider', {
	loop: true,							// ループ(true/false)
	effect: 'slider',					// 形状(slide/fade/cube/coverflow/flip/creative/carsd)
										// fadeを指定した場合は「crossFade: true」を指定
	initialSlide: 0,					// 開始スライド(0が1番目)
	direction: 'horizontal',			// 方向(horizontal/vertical)
										// verticalを指定しら場合はコンテナにheight/max-heightを指定
	speed: 2000,						// スライドスピード(ミリ秒)
	autoHeight: false,					// スライドに合わせて高さを自動調整(false/true)
	spaceBetween: 10,					// スライド間の余白(px)
	slidesPerView: 4,					// 一度に表示するスライド数(数値/auto)
										// autoと「loop: true」を指定する場合は「loopedSlides」を指定
	slidesPerGroup: 1,					// 同時にスライドさせる数
	slideToClickedSlide: false,			// サムネールをクリック時にスライド移行(false/true)
	centeredSlides: true,				// アクティブスライドを中央に表示(false/trye)
	loopedSlides: null,					// 前後に複製するスライド数
	watchSlidesProgress: true,			// スライドの進行状況を表示(false/true)
	autoplay: {							// 自動再生
		delay: 2000,					// 自動再生時間(ミリ秒)
		disableOnInteraction: false		// 操作したら自動再生を停止
	},
	pagination: {						// ページネーション
		el: '.swiper-pagination',
		clickable: true,
	},
	navigation: {						// ナビゲーション
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
});
/* メインスライダーの制御 */
let mySwiperMain = new Swiper ('.main-slider', {
	loop: true,							// ループ(true/false)
	effect: 'slider',					// 形状(slide/fade/cube/coverflow/flip/creative/carsd)
										// fadeを指定した場合は「crossFade: true」を指定
	initialSlide: 0,					// 開始スライド(0が1番目)
	speed: 2000,						// スライドスピード(ミリ秒)
	autoplay: {							// 自動再生
		delay: 2000,					// 自動再生時間(ミリ秒)
		disableOnInteraction: false		// 操作したら自動再生を停止
	},
	pagination: {						// ページネーション
		el: '.swiper-pagination',
		clickable: true,
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	thumbs: {
		swiper: mySwiperThumbs
	},
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

ロケット本体
PAGE
TOP
ロケット炎