投稿日： ｜ 最終更新日:
jQueryでフレキシブルなスライドショーを作る
レスポンシブ・イメージなスライドショーを作ります。「ResponsiveSlides.js」というjQueryプラグインを利用します。このプラグインは、以下のような点で優れています。
- 実装が簡単
- カスタマイズが可能
- スクリプトファイルが軽い
- IE6でも動作する
完成イメージ
いすの画像が表示されます。
↓
数秒でベンチの画像に切り替わります。
↓
画面が小さくなると、スライドショーも画面サイズに合わせて縮みます。
ダウンロード
①以下のサイトを開きます。
→ ResponsiveSlides.js
②サイトの一番下にある「Download the latest version from GitHub」をクリックします。
③GitHubのページが開きますので、右下の「Download ZIP」をクリックしてダウンロードします。
ファイル配置
ダウンロードしたファイルを解凍します。
全てのファイルではありませんが、以下の①～⑥ファイルがあることを確認します。
- ①responsiveslides.css
- ②responsiveslides.min.js
- demo/
- themes/
- ③themes.gif
- images/
- ④1.jpg
- ⑤2.jpg
- ⑥3.jpg
ファイルをサイトのフォルダに配置します。
※サイトフォルダ名を「prototype」とします。
- prototype/
- index.html
- css/
- main.css
- ①responsiveslides.css
- img/
- ④1.jpg
- ⑤2.jpg
- ⑥3.jpg
- ③themes.gif
- js/
- ②responsiveslides.min.js
コード
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsiveslides.css">
</head>
<body id="coffee">
<!-- メインコンテンツ -->
<div id="main">
<div class="row">
<div class="eight cols box-slide">
<ul class="rslides" id="slider1">
<li>
<a href="#"><img src="img/2.jpg" alt="" /></a>
<p class="caption">このスライドにはリンクがついています (Photo by <a href="#" target="_blank">umers30</a>)</p>
</li>
<li>
<img src="img/1.jpg" alt="" />
<p class="caption">キャプションも入れられます (Photo by <a href="#" target="_blank">CIDSE</a>)</p>
</li>
<li>
<img src="img/3.jpg" alt="" />
<p class="caption">Photo by <a href="#" target="_blank">waferboard</a></p>
</li>
</ul>
</div>
<div class="four cols">
<div class="slide-aside">
<p>プロモコンテンツ1</p>
<p>プロモコンテンツ2</p>
<p>プロモコンテンツ3</p>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
<script src="js/vendor/responsiveslides.min.js"></script>
<script>
$(function () {
// Slideshow 1
$("#slider1").responsiveSlides({
speed: 1600,
nav: true,
auto: true,
namespace: "top-slide"
});
});
</script>
</body>
</html>
main.css
/* ボックスモデルの指定 */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 1em;
line-height: 1.4;
background: #fff;
}
img {
vertical-align: middle;
}
#main {
background: #fff;
padding-bottom: 2em;
}
/* ----------
フレキシブル・メディア
---------- */
img {
width: 100%;
max-width: 100%;
}
.row {
width: 1140px;
max-width: 100%;
min-width: 768px;
margin: 0 auto;
overflow: hidden;
}
.row .row {
width: auto;
max-width: none;
min-width: 0;
margin: 0 -10px;
}
.cols {
min-height: 1px;
padding: 0 10px;
float: left;
position: relative;
}
.row .eight { width: 66.66%; }
.row .four { width: 33.33%; }
@media screen and (max-width:49.25em){
/* 788px以下向けのモバイル版グリッド・スタイル */
.cols {
width: auto !important;
height: 100%;
float: none;
}
.row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }
[class*="cols"] + [class*="cols"]:last-child { float: none; }
[class*="cols"] + [class*="cols"].end { float: none; }
}
@media screen and (max-width:25em){
/* 400px以下で強制的に1カラムにするクラス */
.row .cols.force-one {
float: none;
width: auto !important;
height: 100%;
}
}
responsiveslides.css
/*! http://responsiveslides.com v1.54 by @viljamis */
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
/* ================================================================
カスタム・スタイル
================================================================ */
.box-slide {
margin: 1em 0;
}
.top-slide img {
position: relative;
z-index: 1;
}
/* キャプションのスタイル */
#main .top-slide .caption {
display: block;
margin: 0;
padding: 0.8em;
max-width: none;
position: absolute;
z-index: 2;
left: 0;
right: 0;
bottom: 0;
background: #000;
background: rgba(0,0,0, .8);
font-size: 1em;
color: #fff;
}
.top-slide .caption a {
text-decoration: none;
color: #fff;
}
/* ----------
前後ナビのスタイル
---------- */
.top-slide_nav {
position: absolute;
top: 52%;
left: 10px;
height: 61px;
width: 38px;
background: transparent url("../img/themes.gif") no-repeat left top;
margin-top: -45px;
z-index: 3;
-webkit-tap-highlight-color: rgba(0,0,0,0);
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
}
.top-slide_nav:active {
opacity: 1.0;
}
.top-slide_nav.next {
left: auto;
background-position: right top;
right: 10px;
}
/* スライド横プロモコンテンツ */
.slide-aside {
padding: 1em;
}
#main .slide-aside p {
margin: 1em 0;
padding: 1.2em 1em;
background: #ddd;
}
/* ----------
スライド用メディアクエリ
---------- */
@media screen and (max-width:48em){
/* スライド横プロモコンテンツのスタイル */
.slide-aside { padding: 0; }
#main .slide-aside p {
margin: 0 0 1em;
width: 33.3333%;
border-left: 0.5em solid #fff;
border-right: 0.5em solid #fff;
float: left;
}
}
@media screen and (max-width:38em){
/* スライド横プロモコンテンツのスタイル */
#main .slide-aside p {
width: 50%;
}
}
@media screen and (max-width:34em){
/* スライド横プロモコンテンツのスタイル */
#main .slide-aside p {
width: 100%;
float: none;
}
/* キャプションのスタイルの調整 */
#main .top-slide .caption {
position: relative;
padding: 0.6em;
font-size: 0.8em;
background: rgba(0,0,0, 1);
}
.rslides img { float: none; }
/* 小さい画面でのナビゲーションの非表示 */
.top-slide_nav { display: none; }
}
解説
index.html
<div class="eight cols box-slide">
<ul class="rslides" id="slider1">
<li>
<a href="#"><img src="img/2.jpg" alt="" /></a>
<p class="caption">このスライドにはリンクがついています (Photo by <a href="#" target="_blank">umers30</a>)</p>
</li>
<li>
<img src="img/1.jpg" alt="" />
<p class="caption">キャプションも入れられます (Photo by <a href="#" target="_blank">CIDSE</a>)</p>
</li>
<li>
<img src="img/3.jpg" alt="" />
<p class="caption">Photo by <a href="#" target="_blank">waferboard</a></p>
</li>
</ul>
</div>
スライドショー部分です。<ul class="rslides" id="slider1">からがスライドショーです。
<p class="caption">このスライドにはリンクがついています (Photo by <a href="#" target="_blank">umers30</a>)</p>
画像（スライドショー）の下のキャプションです。
<div class="four cols">
<div class="slide-aside">
<p>プロモコンテンツ1</p>
<p>プロモコンテンツ2</p>
<p>プロモコンテンツ3</p>
</div>
</div>
画像（スライドショー）の横にあるプロモーションコンテンツです。画面が小さくなると、スライドショーの下にプロモーションコンテンツが配置されます。
<script src="js/vendor/responsiveslides.min.js"></script>
<script>
$(function () {
// Slideshow 1
$("#slider1").responsiveSlides({
speed: 1600,
nav: true,
auto: true,
namespace: "top-slide"
});
});
</script>
スライドショーのJavaScriptです。レンダリングを遅くさせないため、</body>の直前に記述します。オプションは以下の通りです。
・speed
スライドが切り替わる秒数（ミリ秒）。
・nav
前・次のナビゲーションの表示有無。
・auto
スライドの自動再生。
・namespace
HTMLが生成された際に使われるクラス名。スライドに自動で付与されるクラス名を任意のものへ変更します。ナビゲーションをオンにした場合、ナビゲーション部分のHTMLにクラス名「top-slide_nav」が追加されます。
※追加されるクラス名は、namespace + _navとなります。
main.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
widthで指定した幅が、paddingとborderの幅に関係なく保持されます。
※詳細につきましては、以下のページを参照して下さい。
→グリッド・システムの基本コード
img {
width: 100%;
max-width: 100%;
}
スライドショーの画像をフレキシブル・イメージにします。
.row {
width: 1140px;
max-width: 100%;
min-width: 768px;
margin: 0 auto;
overflow: hidden;
}
.row .row {
width: auto;
max-width: none;
min-width: 0;
margin: 0 -10px;
}
.cols {
min-height: 1px;
padding: 0 10px;
float: left;
position: relative;
}
.row .eight { width: 66.66%; }
.row .four { width: 33.33%; }
@media screen and (max-width:49.25em){
/* 788px以下向けのモバイル版グリッド・スタイル */
.cols {
width: auto !important;
height: 100%;
float: none;
}
.row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }
[class*="cols"] + [class*="cols"]:last-child { float: none; }
[class*="cols"] + [class*="cols"].end { float: none; }
}
@media screen and (max-width:25em){
/* 400px以下で強制的に1カラムにするクラス */
.row .cols.force-one {
float: none;
width: auto !important;
height: 100%;
}
}
スライドショーと、その右側のプロモーションコンテンツをグリッドシステムにします。また、画面が小さい場合はメディアクエリによりスライドショーとプロモーションコンテンツを縦一列にします。
※詳細につきましては、以下のページを参照して下さい。
→グリッド・システムの基本コード
responsiveslides.css
/* ----------
前後ナビのスタイル
---------- */
.top-slide_nav {
position: absolute;
top: 52%;
left: 10px;
height: 61px;
width: 38px;
background: transparent url("../img/themes.gif") no-repeat left top;
margin-top: -45px;
z-index: 3;
-webkit-tap-highlight-color: rgba(0,0,0,0);
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
}
htmlが生成されたあとに、<ul class="rslides" id="slider1">以下に「top-slide_nav」が追加されます。
「top-slide_nav」クラスは、スライドショーのナビゲーションです。
「top-slide_nav」のスタイルを指定します。
トラックバック用のURL
プロフィール
最近の投稿
人気記事
カテゴリー
- Python 114
- 制作 54
- RaspberryPi 41
- Django 40
- WordPress 40
- Linux 27
- VPS 22
- JavaScript 21
- PHP 20
- HTML・CSS 19
- AWS 16
- 仮想環境 15
- レスポンシブデザイン 13
- マイコン 11
- WEB全般 11
- 動画製作 9
- Webサービス 8
- 統合開発環境 8
- 機械学習 8
- PyCharm 7
- jQuery 7
- AfterEffects 7
- 起業・設立 7
- Django REST framework 6
- C# 6
- デザイン 6
- SEO 6
- pydata 6
- Visual Studio 5
- 数学 5
- 携帯サイト 5
- heroku 5
- Mac 5
- illustrator 5
- node.js 5
- Anaconda 5
- Nginx 4
- Jupyter Notebook 4
- インフラ 4
- Google Colaboratory 4
- symfony 4
- Webスクレイピング 3
- photoshop 3
- Go言語 3
- PC 3
- ツール 3
- Docker 3
- facebook 3
- 作業効率化 3
- データベース 3
- Cloud9 3
- コマンド 2
- micro:bit 2
- Kali Linux 2
- Webサーバー 2
- MariaDB 2
- ドローン 2
- コンテナ 2
- DaVinci Resolve 2
- ネットワーク 2
- Java 2
- movie 2
- PCDJ 2
- 音楽 2
- XSERVER 2
- Ansible 1
- Vue.js 1
- JSON 1
- Bootstrap 1
- バージョン管理システム 1
- SSL 1
- S3 1
- ムームードメイン 1
- ネットワーク 1
- アニメーション 1
- D3.js 1
- Rhino 1
- アニメ 1
- git 1
- windows 1
- アクセス解析 1
- スマートフォン 1
- アフィリエイトノウハウ 1
- 知識 1
- TypeScript 1
- 役立つ本・書籍 1
- データサイエンス 1
- ESP32 1
- AI 1
- ownCloud 1
- ＡＰＩ 1
広告