[オープン][S][バナー][レスポンシブ]縦横フリックorホイール可2ボタン手動スライドショー cpSHD_nmsl_fw_2b_zdw

・　サンプルの説明: 　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　同じサイズ（同じアスペクト比であれば可）の写真を使う手動スライドショーです。自動スライドショー機能はありません。アニメーションはです。他のアニメーションへのリンクはこのページ最下部にあります。スライドショー用の写真はクラス名"base"のdiv要素の中に、クラス名"koboData"のimg要素で記述してください。バナーにする時は、クラス名"koboData"のa要素を使い、写真は背景画像にします。background-sizeの値は"cover"でも"contain"でも構いません。; 　表示部分のスタイルシートpadding-top:～%;の～部分に、「写真の高さ／写真の幅」を％で表した数値を書いてください。小さいデバイスで表示してもアスペクト比を維持して縮小してレスポンシブデザインに対応できます。; 　操作ボタンは2個でスライドショー右下に半透明に表示されています。モバイルではタップ、パソコンではマウスを重ねると不透明になります。アニメーションは左右ボタンで横方向に動作します。モバイルでは縦フリックと横フリックでも操作でき、アニメーションはフリックした方向に動作します。パソコンではフリックの代わりにマウスホイールで操作でき、アニメーションは縦方向に動作します。; 　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。; 　使用している画像「干満差が大きい二重惑星の世界」は生成AIのCopilotで作ったものです。

アスペクト比維持型
	⇔

・　3ボタン横型スライドショー: 　表示部分のスタイルシートでpadding-top:～%;に写真の（高さ／幅）を％で書いてください。このサンプルは正方形の写真を使っているため100%です。

</div>

</div>

,DFW={SDA:function(n){n.preventDefault?n.preventDefault():n.returnValue=!1},XF:function(n,t,i,r){var f,e,u=!1;n.addEventListener("touchstart",function(){f=event.changedTouches[0].pageX;u=!0},!1);h[o.substr(3,2)].addEventListener("touchmove",function(n){u&&(n.preventDefault(),e=event.changedTouches[0].pageX,e-f>r?(u=!1,i()):e-f<-r&&(u=!1,t()))},!1);n.addEventListener("touchend",function(){u&&(u=!1)},!1)},YF:function(n,t,i,r){var f,e,u=!1;n.addEventListener("touchstart",function(){f=event.changedTouches[0].pageY;u=!0},!1);h[y.substr(3,2)].addEventListener("touchmove",function(n){u&&(n.preventDefault(),e=event.changedTouches[0].pageY,e-f>r?(u=!1,i()):e-f<-r&&(u=!1,t()))},!1);n.addEventListener("touchend",function(){u&&(u=!1)},!1)},MW:function(n,t,i){var r=function(n){var r=window.event||n,u=r.detail?r.detail*-120:r.wheelDelta;if(u<=-120?t():i(),r.preventDefault)r.preventDefault();else return!1},u=/Firefox/i.test(navigator.userAgent)?"DOMMouseScroll":"mousewheel";h[o.substr(3,2)].addEventListener(u,r,!1)}},f=n.querySelector(".base"),c=n.querySelector(".mae"),l=n.querySelector(".tugi"),e=f.querySelectorAll(".koboData"),p=e.length,w,t=0,a=0,i=1,s=!1,o=Copyright,v=HomePage,y=MailAddress,b=ContentType,h={iy:p,ya:da,ak:n},r=document.createElement("a"),u=function(n,r){s||(s=!0,i=n>t?1:-1,a=t,t=n,t+=h[v.substr(8,2)],t%=h[y.substr(1,2)],document.querySelector(".c_"+o).href.substr(8,2)===o.substr(1,2)&&setTimeout(function(){k(r)},50))},k=function(r){clearTimeout(w);af(n,f,da,e[t],e[a],i,r);setTimeout(function(){s=!1},h[y.substr(2,2)]+100)};c&&(c.onclick=function(){u(t-1,"x")});l&&(l.onclick=function(){u(t+1,"x")});typeof DFW!="undefined"&&DFW.XF(f,function(){i=1;u(t+1,"x")},function(){i=-1;u(t-1,"x")},50);typeof DFW!="undefined"&&DFW.YF(f,function(){i=1;u(t+1,"y")},function(){i=-1;u(t-1,"y")},50);typeof DFW!="undefined"&&DFW.MW(f,function(){i=1;u(t+1,"y")},function(){i=-1;u(t-1,"y")});e[t].style.zIndex=2;e[t].style.opacity=1;window.addEventListener("load",function(){document.querySelector(".c_"+o)||(document.body.appendChild(r),r.setAttribute("href",v),r.setAttribute("class","c_"+o),r.innerHTML=b+" (C) "+o,r.style.display="none",r.style.fontSize="12px",r.style.width="250px",r.style.margin="1ex auto")})}(document.getElementById("

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

・　別のアニメーションを見る: アニメーションがドラッグ・フリック・マウスホイール操作で縦横連動するもの。
　縦横スクロール　縦横視差スクロール　縦横透かしスクロール　縦横視差透かしスクロール　縦横入れ替わり　縦横転がり　縦横3D回転　縦横3D裏返し　縦横3D入れ替わり　縦横3D逆入れ替わり　縦横CUBE回転　縦横CUBE枠内回転　縦横コーナー回転　縦横連動ランダムズーム3D回転1 　縦横連動ランダムズーム3D回転2

・　同型のスライドショーだがアニメーションがドラッグ・フリック・マウスホイールに連動しないもの。: 前進と後進で動作方向が反転するもの。
　スクロール横　スクロール縦　視差スクロール横　視差スクロール縦　透かしスクロール横　透かしスクロール縦　視差透かしスクロール横　視差透かしスクロール縦　 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縦ズーム逆入れ替わり　 CUBE横ズーム回転　 CUBE縦ズーム回転　 3D横ズームスクロール　 3D縦ズームスクロール　射光型3D横ズームページめくり　射光型3D縦ズームページめくり　全回転型3D横ズームページめくり　全回転型3D縦ズームページめくり　

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