[オープン][マルチ][レスポンシブ][アクティブ]カルーセル連動スライドショーギャラリー集cpMHDs_n9casg_zdwp

・　サンプルの説明: 　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　写真でも、写真や文章などをひとまとめにしたBLOCK要素でも、スライドさせる事ができるカルーセル連動型スライドショーギャラリーです。アニメーションはです。他のアニメーションへのリンクはこのページ最下部にあります。レスポンシブデザインへの対応で、アスペクト比維持型（同じアスペクト比のimg要素の写真を直接使用できる）と高さ維持型（文章が多い場合はみ出しを防ぐ効果があるが、写真を表示する場合はBLOCK要素の背景として表示する）を掲載しています。アスペクト比維持型と高さ維持型はスタイルシートで区別している為スクリプト部分は共通です。スライドショーの操作ボタンは三つ型で、モバイルではタップ、パソコンではマウスを重ねると出てきます。; 　このスライドショーは、スライドショーを表示しているWindowを非アクティブにする（最前面ではなくする・選択を外す・blurにする）と停止し、アクティブに戻す（最前面にする・選択する・focusにする）と再開します。即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。スライドショーの写真をクリックして、別のタブに設定したページを開いた時も一時停止します。スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。この機能は「カスタマイズ」でON／OFFを設定できます。; 　BLOCK要素で写真を表現する場合その背景画像に写真を設定します。スタイルbackground-size:cover;で画面いっぱいに表示し、あたかも写真のスライドショーの様にする事もできます。また、background-size:contain;にすれば、形の違う写真を一定の枠内に表示できます。; 　スライドショーデータは「ここからスライドショーのデータ。↓」以下のクラス名koboDataの要素で書きます。; 　カルーセルサムネイルは、現在選択されているデータのサムネイルが画面の中央に自動的にスクロールします。すべて同じアスペクト比の画像を用意してください。このページでは横縦比が4:3の画像を使っています。データは、クラス名"gal_base"のdiv要素の中に、スライドショーデータと同じ順番・同じ数のimg要素で書いてください。; 　このスライドショーギャラリーは、個人・商用を問わず無料で永久に自由に使用できます。掲載しているソースコードのみで作動し、jQueryなどのライブラリー本体やそのプラグインも、Javascripやcssの外部ファイルも不要です。

アスペクト比維持型
	⇔
高さ維持型
	⇔

・　アスペクト比維持型: 　レスポンシブデザインへの対応がアスペクト比維持型のため、表示部分と同じサイズならばimg要素を使用できる。表示部分を写真（img要素）と同じアスペクト比にするには、表示部分のスタイルシートでpadding-top:～%;に写真の（高さ／幅）を％で書く。

/** スライドショーギャラリー全体。max-width:～px;に最大表示サイズを書く。 **/
.cpMHDs_n9casg_ra_os{position:relative;top:0;left:0;width:90%;max-width:640px;margin:auto;overflow:hidden;font-family:"メイリオ";text-align:center;}

/** クラス名「cpMHDs_n9casg_ra_os」の表示部分。 **/
/** アスペクト比維持型はpadding-top:～%;に表示部分の（高さ／幅）を％で書く。 **/
.cpMHDs_n9casg_ra_os .base{position:relative;top:0;left:0;padding-top:75%;}

/** 個々のデータ。 **/
.cpMHDs_n9casg_ra_os .base .koboData{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:0;font-size:16px;box-sizing:border-box;}
@media screen and (max-width: 600px){.cpMHDs_n9casg_ra_os .base .koboData{font-size:12px;}}

/** ボタン。transition-duration:～s;は出没アニメーション速度。 **/
.cpMHDs_n9casg_ra_os .but_sl{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;z-index:10;width:40px;height:40px;border:0;outline:0;border-radius:50%;line-height:40px;color:#fff;font-family:'メイリオ';font-size:10px;text-align:center;cursor:pointer;opacity:0;transition-duration:0.5s;background-color:rgba(0,0,0,0.4);}
.cpMHDs_n9casg_ra_os:hover .but_sl{width:80px;height:80px;opacity:1;line-height:80px;font-size:16px;}
.cpMHDs_n9casg_ra_os .mae{position:absolute;top:0;bottom:0;left:5%;margin:auto 0px;z-index:20;color:#fff;background-color:rgba(0,0,0,0.4);border-radius:50%;height:50px;width:50px;cursor:pointer;box-sizing:border-box;opacity:0;transition-duration:.5s;}
.cpMHDs_n9casg_ra_os .mae::before{content:'';width:8px;height:8px;display:block;border-top:solid 2px;border-right:solid 2px;transform:rotate(-135deg);position:absolute;top:0;bottom:0;left:4px;right:0;margin:auto;}
.cpMHDs_n9casg_ra_os:hover .mae{left:15%;opacity:1;}
.cpMHDs_n9casg_ra_os .tugi{position:absolute;top:0;bottom:0;right:5%;margin:auto 0px;z-index:20;color:#fff;background-color:rgba(0,0,0,0.4);border-radius:50%;height:50px;width:50px;cursor:pointer;box-sizing:border-box;opacity:0;transition-duration:.5s;}
.cpMHDs_n9casg_ra_os .tugi::before{content:'';width:8px;height:8px;display:block;border-top:solid 2px;border-right:solid 2px;transform:rotate(45deg);position:absolute;top:0;bottom:0;left:0;right:4px;margin:auto;}
.cpMHDs_n9casg_ra_os:hover .tugi{right:15%;opacity:1;}

/** サムネイル。width:～%;はサムネイルの幅で、写真の枚数が少ない時は大きくして表示数を減らす（例えば20％では5枚表示）。 **/
.cpMHDs_n9casg_ra_os .gal_waku{position:relative;top:0px;left:0px;z-index:10;width:15%;max-width:100px;margin:auto;}
.cpMHDs_n9casg_ra_os .gal_base{position:relative;top:0px;left:0px;}
.cpMHDs_n9casg_ra_os .gal_base img{position:absolute;top:0px;left:0px;width:100%;cursor:pointer;}

/** 三角矢印。 **/
.cpMHDs_n9casg_ra_os .sankaku{position:absolute;bottom:-8px;left:0px;z-index:30;width:100%;text-align:center;color:#fff;font-size:16px;}

</style>

<img class="koboData" src="../img/18.jpg" title="ツバキ；img要素" />

<a class="koboData" href="../img/1.html" target="_blank" title="アルストロメリア；a要素" style="background:url('../img/1.jpg') center center no-repeat #eed;background-size:contain;">
<div title="この部分はa要素の内包div要素" style="position:absolute;top:0px;left:0%;width:60%;text-align:left;padding:15px;margin:15px;line-height:1.2em;color:#fff;font-size:80%;background-color:rgba(0,0,0,0.6);border-radius:10px;transition:0.5s;word-break:break-word;">
　これはa要素の背景写真を利用したバナーデータです。クリックで指定したページが開きます。レスポンシブデザインへの対応では、アスペクト比維持型（写真中心の場合便利）としても高さ維持型（文章が多い場合はみ出しを防ぐ）としても使用できます。
背景画像のスタイルをbackground-size:contain;にして写真が枠内に収まるように表示しています。
</div>
</a>

<div class="koboData" title="オダマキ；div要素" style="background-image:url('../img/24.jpg');background-size:85%;background-repeat:no-repeat;background-position:center;background-color:#356;">
<div title="この部分はdiv要素" style="position:absolute;bottom:0px;right:0%;width:70%;text-align:left;padding:15px;margin:15px;line-height:1.2em;color:#fff;font-size:80%;background-color:rgba(0,0,0,0.6);border-radius:10px;transition:0.5s;word-break:break-word;">
　これはdiv要素の背景写真を利用したBLOCKデータです。この様に文章などのコンテンツを差し込む事ができます。
スタイルシートを、background-image:url('写真のURL');background-repeat:no-repeat;background-position:center;background-size:～;などとしてください。
このデータの背景画像のbackground-sizeは85%。
</div>
</div>

<a class="koboData" href="../img/10.html" target="_blank" title="カタバミ；a要素" style="background:url('../img/10.jpg') center center no-repeat #eed;background-size:cover;">
</a>

<div class="koboData" title="サルスベリ">
<div style="width:100%;max-width:720px;height:100%;background-color:#ddd;border:1px solid #ccc;box-sizing:border-box;text-align:center;margin:auto;">
<img style="width:60%;margin-top:25px;" src="../img/20m.jpg" />
<div style="font-weight:bold;font-size:90%;margin:1% auto;">定型カード型のデータ</div>
<div style="width:90%;text-align:left;font-size:80%;margin:auto;">　ここにカードのコメントを書いてください。カードの中身はHTMLで装飾可能です。このサンプルでは「写真」「題名」「コメント」の３要素で作っていますが、自由にデザインを変更できます。ただし、スマホで表示したときにコンテンツがはみ出さない様に注意してください。</div>
</div>
</div>

<img class="koboData" src="../img/9.jpg" title="ビヨウヤナギ；img要素" />

<a class="koboData" href="../img/8.html" target="_blank" title="ツワブキ；a要素" style="background-image:url('../img/8.jpg');background-size:conver;">
<div title="この部分はa要素の内包div要素" style="position:absolute;top:0px;right:0%;width:50%;text-align:left;padding:15px;margin:15px;line-height:1.2em;color:#fff;font-size:80%;background-color:rgba(0,0,0,0.6);border-radius:10px;transition:0.5s;word-break:break-word;">
　これはa要素の背景写真を利用したバナーデータです。背景画像のスタイルをbackground-size:cover;にして写真を枠全体に表示しています。サムネイル用の写真は、統一したサイズのIMG要素で作り、クラス名「gal_base」のdiv要素の中にスライドショーと同じ順番で書いてください。
</div>
</a>

<img class="koboData" src="../img/11.jpg" title="アガパンサス；img要素" />

<div class="koboData" title="あかまんま；div要素" style="background-image:url('../img50/12.jpg');background-repeat:no-repeat;background-position:center;background-size:contain;background-color:#eed;">
<div title="この部分はdiv要素" style="position:absolute;bottom:0px;right:0%;width:80%;text-align:left;padding:15px;margin:15px;line-height:1.2em;color:#fff;font-size:80%;background-color:rgba(0,0,0,0.6);border-radius:10px;transition:0.5s;word-break:break-word;">
　これはdiv要素の背景写真を利用したBLOCKデータです。スライドショーのデータはクラス名「base」のdiv要素の中に順番に書いてください。IMGデータ・バナーデータ・BLOCKデータを混在させる事ができます。
このデータの背景画像のbackground-sizeはcontain。
</div>
</div>

<img class="koboData" src="../img/26.jpg" title="ハナミズキ；img要素" />

<a class="koboData" href="../img/6.html" target="_blank" title="ルドベキア；a要素で背景画像は80%" style="background-image:url('../img/6.jpg');background-size:80%;background-repeat:no-repeat;background-position:center;background-color:#966;">
</a>

<div class="koboData" title="ガザニア；div要素の定形カード型">
<div style="width:100%;max-width:720px;height:100%;background-color:#ddd;border:1px solid #ccc;box-sizing:border-box;text-align:center;margin:auto;">
<img style="width:60%;margin-top:25px;" src="../img/4m.jpg" />
<div style="font-weight:bold;font-size:90%;margin:1% auto;">定型カード型のデータ</div>
<div style="width:90%;text-align:left;font-size:80%;margin:auto;">　ここにカードのコメントを書いてください。カードの中身はHTMLで装飾可能です。このサンプルでは「写真」「題名」「コメント」の３要素で作っていますが、自由にデザインを変更できます。ただし、スマホで表示したときにコンテンツがはみ出さない様に注意してください。</div>
</div>
</div>

</div>

</div>
</div>

</div>

,e=n.querySelector(".base"),l=n.querySelector(".gal_waku"),u=l.querySelector(".gal_base"),k=function(n,t){var i=t.innerHTML;n.innerHTML=i+i},ft=function(n,t,i,r){t.style.transitionDuration=r+"ms";t.style.left=-i.offsetLeft/n.offsetWidth*100+"%";setTimeout(function(){t.style.transitionDuration="0ms"},r+50)},et=function(n,t,i){for(var r=0;r<t;r++)n[r].style.left=i*r+"%"},ot=function(n,t,i,r){i.style.transitionProperty="left";i.style.left=-r.offsetLeft/t.offsetWidth*100+"%"},st=function(n,t,i,r,u,f){return u<f/4&&(u+=f/2,t.style.left=-1*i[r+f/2].offsetLeft/n.offsetWidth*100+"%"),u>f*3/4&&(u-=f/2,t.style.left=-1*i[r-f/2].offsetLeft/n.offsetWidth*100+"%"),u},f;k(e,e);k(u,u);var p=n.querySelector(".but_sl"),d=n.querySelector(".mae"),g=n.querySelector(".tugi"),o=e.querySelectorAll(".koboData"),i=u.querySelectorAll("img"),s=o.length,a,t=s/2,nt=0,tt=1,w=!1,yy=!1,h=Copyright,b=HomePage,it=MailAddress,ht=ContentType,v={iy:s,ya:da,ke:ds},r=document.createElement("a"),c=function(n){w||(w=!0,tt=n>t?1:-1,nt=t,t=st(l,u,i,t,n,s),t+=v[h.substr(1,2)],t%=v[it.substr(1,2)],document.querySelector(".c_"+h).href.substr(document.querySelector(".c_"+h).href.indexOf("/")+3,2)===h.substr(1,2)&&setTimeout(ct,50))},ct=function(){clearTimeout(a);af(n,e,da,o[t],o[nt],tt);ft(l,u,i[t],da);setTimeout(function(){y&&!yy&&rt();w=!1},v[it.substr(2,2)]+100)},rt=function(){clearTimeout(a);a=setTimeout(function(){c(t+1)},v[it.substr(4,2)])};for(f=0;f<s;f++)i[f].ind=f,i[f].onclick=function(){this.ind!=t&&c(this.ind)};d&&(d.onclick=function(){c(t-1)});g&&(g.onclick=function(){c(t+1)});p&&(p.innerHTML=y?"pause":"play",p.onclick=function(){y?(clearTimeout(a),y=!1,this.innerHTML="play"):(y=!0,this.innerHTML="pause",c(t+1))});et(i,s,100);ot(e,l,u,i[t]);o[t].style.zIndex=2;o[t].style.opacity=1;n.mp=document.createElement("div");e.appendChild(n.mp);n.mp.style.position="absolute";n.mp.style.top="0px";n.mp.style.left="0px";n.mp.style.zIndex=0;n.mp.style.width="100%";n.mp.style.height="100%";n.mp.style.display="none";n.mp.style.transitionProperty="transform,left,clip";n.mp.style.backgroundColor="#fff";fb&&(window.addEventListener("blur",function(){y&&!yy&&(yy=!0,clearTimeout(a))},!1),window.addEventListener("focus",function(){y&&yy&&(yy=!1,c(t+1))},!1));y&&!yy&&rt();window.addEventListener("load",function(){u.style.paddingTop=100*i[t].naturalHeight/i[t].naturalWidth+"%";document.querySelector(".c_"+h)||(document.body.appendChild(r),r.setAttribute("href",b),r.setAttribute("class","c_"+h),r.innerHTML=ht+" (C) "+h,r.style.display="none",r.style.fontSize="12px",r.style.width="250px",r.style.margin="1ex auto")})}(document.getElementById("

　以下のソースコードをスライドショーギャラリーを貼り付ける場所にコピーし、ご自身の写真データに書き換えてください。このページの見本は画像のURLを相対表記で書いているため、このままでは画像が表示されません。可能ならば、スタイルシート部分はHEAD内に移動してください。また、スタイルシートとスクリプトをそれぞれ別ファイルにし、ページに読み込んで使用する事も可能です。

・　高さ維持型: 　レスポンシブデザインへの対応が高さ維持型のためimg要素は使用できない。写真を表現するときは、背景を写真にしたBLOCK要素を使う。表示部分のスタイルシートheigtht:～;で高さを固定する。

/** スライドショーギャラリー全体。max-width:～px;に最大表示サイズを書く。 **/
.cpMHDs_n9casg_rh_os{position:relative;top:0;left:0;width:90%;max-width:700px;margin:auto;overflow:hidden;font-family:"メイリオ";text-align:center;}

/** クラス名「cpMHDs_n9casg_rh_os」の表示部分。 **/
/** 高さ固定型はheigtht:～;で高さを固定する。ただし、IMG要素データは使用できない。 ***/
.cpMHDs_n9casg_rh_os .base{position:relative;top:0;left:0;width:100%;height:480px;}

/** 個々のデータ。 **/
.cpMHDs_n9casg_rh_os .base .koboData{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:0;font-size:16px;box-sizing:border-box;}
@media screen and (max-width: 600px){.cpMHDs_n9casg_rh_os .base .koboData{font-size:12px;}}

/** ボタン。transition-duration:～s;は出没アニメーション速度。 **/
.cpMHDs_n9casg_rh_os .but_sl{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;z-index:10;width:40px;height:40px;border:0;outline:0;border-radius:50%;line-height:40px;color:#fff;font-family:'メイリオ';font-size:10px;text-align:center;cursor:pointer;opacity:0;transition-duration:0.5s;background-color:rgba(0,0,0,0.4);}
.cpMHDs_n9casg_rh_os:hover .but_sl{width:80px;height:80px;opacity:1;line-height:80px;font-size:16px;}
.cpMHDs_n9casg_rh_os .mae{position:absolute;top:0;bottom:0;left:5%;margin:auto 0px;z-index:20;color:#fff;background-color:rgba(0,0,0,0.4);border-radius:50%;height:50px;width:50px;cursor:pointer;box-sizing:border-box;opacity:0;transition-duration:.5s;}
.cpMHDs_n9casg_rh_os .mae::before{content:'';width:8px;height:8px;display:block;border-top:solid 2px;border-right:solid 2px;transform:rotate(-135deg);position:absolute;top:0;bottom:0;left:4px;right:0;margin:auto;}
.cpMHDs_n9casg_rh_os:hover .mae{left:15%;opacity:1;}
.cpMHDs_n9casg_rh_os .tugi{position:absolute;top:0;bottom:0;right:5%;margin:auto 0px;z-index:20;color:#fff;background-color:rgba(0,0,0,0.4);border-radius:50%;height:50px;width:50px;cursor:pointer;box-sizing:border-box;opacity:0;transition-duration:.5s;}
.cpMHDs_n9casg_rh_os .tugi::before{content:'';width:8px;height:8px;display:block;border-top:solid 2px;border-right:solid 2px;transform:rotate(45deg);position:absolute;top:0;bottom:0;left:0;right:4px;margin:auto;}
.cpMHDs_n9casg_rh_os:hover .tugi{right:15%;opacity:1;}

/** サムネイル。width:～%;はサムネイルの幅で、写真の枚数が少ない時は大きくする。 **/
.cpMHDs_n9casg_rh_os .gal_waku{position:relative;top:0px;left:0px;z-index:10;width:15%;max-width:100px;margin:auto;}
.cpMHDs_n9casg_rh_os .gal_base{position:relative;top:0px;left:0px;}
.cpMHDs_n9casg_rh_os .gal_base img{position:absolute;top:0px;left:0px;width:100%;cursor:pointer;}

/** 三角矢印。 **/
.cpMHDs_n9casg_rh_os .sankaku{position:absolute;bottom:-8px;left:0px;z-index:30;width:100%;text-align:center;color:#fff;font-size:16px;}

</style>

<div class="koboData" title="これはdiv要素で、写真は背景画像。" title="ツバキ；div要素" style="background:url('../img/18.jpg') center center no-repeat #eed;background-size:cover;">
<div style="position:absolute;top:0px;left:0px;text-align:left;padding:20px;color:#fff;font-size:80%;background-color:rgba(0,0,0,0.4);">
　データにdiv要素を使用すると中身をHTMLで自由に編集でき、内側にこの様なdiv要素を作って文章やリンクや画像やバナーなどを入れる事もできます。データはクラス名koboDataです。背景画像のスタイルをbackground-size:cover;にして写真を枠全体に表示しています。
</div>
</div>

<div class="koboData" title="これはdiv要素で、写真は背景画像。" title="ビヨウヤナギ；div要素" style="background:url('../img/9.jpg') center center no-repeat #eed;background-size:cover;">
<div style="position:absolute;top:60px;left:0px;text-align:left;padding:20px;color:#fff;font-size:80%;background-color:rgba(0,0,0,0.4);">
　データにdiv要素を使用すると中身をHTMLで自由に編集でき、内側にこの様なdiv要素を作って文章やリンクや画像やバナーなどを入れる事もできます。データはクラス名koboDataです。背景画像のスタイルをbackground-size:cover;にして写真を枠全体に表示しています。
</div>
</div>

<a class="koboData" href="../img/8.html" target="_blank" title="ツワブキ；a要素" style="background:url('../img/8.jpg') center center no-repeat #eed;background-size:cover;">
<div title="この部分はa要素の内包div要素" style="position:absolute;top:0px;right:0%;width:50%;text-align:left;padding:15px;margin:15px;line-height:1.2em;color:#fff;font-size:80%;background-color:rgba(0,0,0,0.6);border-radius:10px;transition:0.5s;word-break:break-word;">
　これはa要素の背景写真を利用したバナーデータです。背景画像のスタイルをbackground-size:cover;にして写真を枠全体に表示しています。サムネイル用の写真は、統一したサイズのIMG要素で作り、クラス名「gal_base」のdiv要素の中にスライドショーと同じ順番で書いてください。
</div>
</a>

<div class="koboData" title="これはdiv要素で、写真は背景画像。" title="アガパンサス；div要素" style="background:url('../img/11.jpg') center center no-repeat #eed;background-size:contain;">
<div style="position:absolute;bottom:20px;left:0px;text-align:left;padding:20px;color:#fff;font-size:80%;background-color:rgba(0,0,0,0.4);">
　データにdiv要素を使用すると中身をHTMLで自由に編集でき、内側にこの様なdiv要素を作って文章やリンクや画像やバナーなどを入れる事もできます。データはクラス名koboDataです。背景画像のスタイルをbackground-size:contain;にして写真を枠内に収めて表示しています。
</div>
</div>

<div class="koboData" title="これはdiv要素で、写真は背景画像。" title="ハナミズキ；div要素" style="background:url('../img/26.jpg') center center no-repeat #eed;background-size:cover;">
<div style="position:absolute;bottom:0px;left:0px;text-align:left;padding:20px;color:#fff;font-size:80%;background-color:rgba(0,0,0,0.4);">
　データにdiv要素を使用すると中身をHTMLで自由に編集でき、内側にこの様なdiv要素を作って文章やリンクや画像やバナーなどを入れる事もできます。データはクラス名koboDataです。背景画像のスタイルをbackground-size:cover;にして写真を枠全体に表示しています。
</div>
</div>

</div>

</div>
</div>

</div>

・　別のアニメーションを見る: 前進と後進で動作方向が反転するもの。
　スクロール横　スクロール縦　視差スクロール横　視差スクロール縦　透かしスクロール横　透かしスクロール縦　視差透かしスクロール横　視差透かしスクロール縦　 Z方向スクロール　縦スウィング　縦ズームスウィング　横転がり　縦転がり　横入れ替わり　縦入れ替わり　 CUBE枠内横回転　 CUBE枠内縦回転　アップダウン　ダウンアップ　ダウンジャンプ　ランダムアップダウン　せり出し　ランダム回転移動インアウト　ドア横回転　ドア縦回転　横3D回転　縦3D回転　円ワイプ　 2D摘みページめくり　 2Dずらしページめくり　 rAF型弾性二段階ズーム

ランダムな方向に動作するもの、または方向性がないもの。
　フェード　ランダム透かし移動インアウト　ダウンアップジャンプ　落下　起き上がり　透かし　 blur 　 brightness 　ランダムclip-polygon 　ランダムclip-circle 　ランダムズーム　ショットズーム回転　フラッシュ　ランダムワイプ　ランダム回転入れ替わり　ランダム2D回転　 rAF型弾性移動　 rAF型びろ～ん

ズーム3Dアニメーションを使ったもの。
　ランダム縦横ズーム3D回転1 　ランダム縦横ズーム3D回転2 　 3D横ズーム裏返し　 3D縦ズーム裏返し　ランダム3D縦横ズーム裏返し　 3D横ズーム入れ替わり　 3D縦ズーム入れ替わり　ランダム3D縦横ズーム入れ替わり　 3D横ズーム逆入れ替わり　 3D縦ズーム逆入れ替わり　ランダム3D縦横ズーム逆入れ替わり　 CUBE横ズーム回転　 CUBE縦ズーム回転　ランダム縦横ズームCUBE回転　 3D横ズームスクロール　 3D縦ズームスクロール　ランダム縦横ズームコーナー回転　射光型3D横ズームページめくり　射光型3D縦ズームページめくり　全回転型3D横ズームページめくり　全回転型3D縦ズームページめくり

シャトル型。アニメーションの動作方向が、next・prevに関係なく、左右や上下や前後を繰り返す。
前後シャトル型zスクロール　左右シャトル型スクロール　上下シャトル型スクロール　左右シャトル型視差移動　上下シャトル型視差移動　左右シャトル型透かしスクロール　上下シャトル型透かしスクロール　左右シャトル型透かし視差移動　上下シャトル型透かし視差移動　前後シャトル型せり出し　左右シャトル型転がり　上下シャトル型転がり　左右シャトル型枠内CUBE回転　上下シャトル型枠内CUBE回転　左右シャトル型ズームCUBE回転　上下シャトル型ズームCUBE回転　左右シャトル型3D入れ替わり　上下シャトル型3D入れ替わり　左右シャトル型3D逆入れ替わり　上下シャトル型3D逆入れ替わり　左右シャトル型3D裏返し　上下シャトル型3D裏返し　左右シャトル型ドア回転　上下シャトル型ドア回転