[オープン][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の外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。

アスペクト比維持型
	⇔

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

</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