[オープン][S][バナー][レスポンシブ][アクティブ]カルーセル連動スライドショーギャラリーcpSHD_n9casg_zdwp

・　サンプルの説明: 　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　同じサイズ（同じアスペクト比であれば可）の写真を使うスライドショーギャラリーです。アニメーションはです。他のアニメーションへのリンクはこのページ最下部にあります。レスポンシブデザインへの対応は「アスペクト比維持型」です。スライドショーの操作ボタンは三つ型で、モバイルではタップ、パソコンではマウスを重ねると出てきます。; 　このスライドショーは、スライドショーを表示しているWindowを非アクティブにする（最前面ではなくする・選択を外す・blurにする）と停止し、アクティブに戻す（最前面にする・選択する・focusにする）と再開します。即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。スライドショーの写真をクリックして、別のタブに設定したページを開いた時も一時停止します。スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。この機能は「カスタマイズ」でON／OFFを設定できます。; 　スライドショー用の写真データは、「ここからスライドショーのデータ。↓」以下のクラス名koboDataのimg要素で書きます。バナーにする時は、クラス名"koboData"のa要素を使い、写真は背景画像にします。background-sizeの値は"cover"でも"contain"でも構いません。間違えてクラス名"koboData"のimg要素を囲むとエラーになります。; 　カルーセルサムネイルは、現在選択されているデータのサムネイルが画面の中央に自動的にスクロールします。スライドショー用の写真を縮小したものを用意してください。もちろん、スライドショー用の写真を流用しても構いませんが、写真の枚数が多いとページが重くなります。クラス名"gal_base"のdiv要素の中に、スライドショーデータと同じ順番のimg要素で書いてください。; 　このスライドショーギャラリーは、個人・商用を問わず無料で永久に自由に使用できます。掲載しているソースコードのみで作動し、jQueryなどのライブラリー本体やそのプラグインも、Javascripやcssの外部ファイルも不要です。; 　使用している画像「天体の接近と都市の崩壊」は生成AIのCopilotで作ったものです。

アスペクト比維持型
	⇔

・　カルーセル連動スライドショーギャラリー: 　表示部分のスタイルシートでpadding-top:～%;に写真の（高さ／幅）を％で書く。

/** ページ全体。必要に応じて書き換えてください。 **/
body{font-family:"メイリオ";text-align:center;}

/** スライドショーギャラリー全体。max-width:～px;に最大表示サイズを書く。 **/
.cpSHD_n9casg_ra_os{position:relative;top:0;left:0;width:90%;max-width:800px;margin:auto;overflow:hidden;}

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

/** 個々のデータ。 **/
.cpSHD_n9casg_ra_os .base .koboData{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:0;}

/** ボタン。transition-duration:～s;は出没アニメーション速度。 **/
.cpSHD_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);}
.cpSHD_n9casg_ra_os:hover .but_sl{width:80px;height:80px;opacity:1;line-height:80px;font-size:16px;}
.cpSHD_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;}
.cpSHD_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;}
.cpSHD_n9casg_ra_os:hover .mae{left:15%;opacity:1;}
.cpSHD_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;}
.cpSHD_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;}
.cpSHD_n9casg_ra_os:hover .tugi{right:15%;opacity:1;}

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

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

</style>

</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[b.substr(8,2)],t%=v[it.substr(1,2)],document.querySelector(".c_"+h).href.substr(8,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[b.substr(11,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("

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

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

ランダムな方向に動作するもの、または方向性がないもの。
　落下　起き上がり　透かし　 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裏返し　左右シャトル型ドア回転　上下シャトル型ドア回転