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

・　サンプルの説明: 　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　同じサイズ（同じアスペクト比であれば可）で連番のファイル名の写真を使う手動スライドショーです。自動スライドショー機能はありません。アニメーションはです。他のアニメーションへのリンクはこのページ最下部にあります。連番のファイル名とは、0.jpg・1.jpg・2.jpg～や 12.jpg・13.jpg・14.jpg～などの、連続する正の整数値として成り立つ数字をファイル名にした写真群です。例えばファイル名が 700.jpg の写真は使えますが 007.jpg は使えません。もちろん 2022_10.jpg や Y1953.jpg などの様に文字が入ったファイル名も使えません。連番の最初の数字は何番でも構いません。「カスタマイズ」で最初と最後の数字と写真へのパスを設定してください。; 　写真表示部分のスタイルシートpadding-top:～%;の～部分に、「写真の高さ／写真の幅」を％で表した数値を書いてください。小さいデバイスで表示してもアスペクト比を維持して縮小してレスポンシブデザインに対応できます。; 　操作ボタンは2個でスライドショー右下に半透明に表示されています。モバイルではタップ、パソコンではマウスを重ねると不透明になります。アニメーションは左右の矢印ボタンで横方向に動作します。モバイルでは縦フリックと横フリックでも操作でき、アニメーションはフリックした方向に動作します。パソコンではフリックの代わりにマウスホイールで操作でき、アニメーションは縦方向に動作します。; 　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。

アスペクト比維持型
	⇔

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

;for(var f={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);n.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);n.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";n.addEventListener(u,r,!1)}},e=n.querySelector(".base"),v=n.querySelector(".mae"),y=n.querySelector(".tugi"),c=[],s=[],p="",w=lp-fp+1,g,t=0,b=0,i=1,l=!1,h=Copyright,k=HomePage,d=MailAddress,nt=ContentType,a={iy:w,ya:da},r=document.createElement("a"),u=function(n,r){l||(l=!0,i=n>t?1:-1,b=t,t=n,t+=a[k.substr(8,2)],t%=a[d.substr(1,2)],document.querySelector(".c_"+h).href.substr(8,2)===h.substr(1,2)&&setTimeout(function(){tt(r)},50))},tt=function(r){clearTimeout(g);af(n,e,da,s[t],s[b],i,r);setTimeout(function(){l=!1},a[d.substr(2,2)]+100)},o=0;o<w;o++)c[o]=new Image,c[o].src=pp+(o+fp)+".jpg",p+='<img class="koboData" src="'+c[o].src+'" />';e.innerHTML=p;s=e.querySelectorAll(".koboData");v&&(v.onclick=function(){u(t-1,"x")});y&&(y.onclick=function(){u(t+1,"x")});typeof f!="undefined"&&f.XF(e,function(){i=1;u(t+1,"x")},function(){i=-1;u(t-1,"x")},50);typeof f!="undefined"&&f.YF(e,function(){i=1;u(t+1,"y")},function(){i=-1;u(t-1,"y")},50);typeof f!="undefined"&&f.MW(e,function(){i=1;u(t+1,"y")},function(){i=-1;u(t-1,"y")});s[t].style.zIndex=2;s[t].style.opacity=1;window.addEventListener("load",function(){document.querySelector(".c_"+h)||(document.body.appendChild(r),r.setAttribute("href",k),r.setAttribute("class","c_"+h),r.innerHTML=nt+" (C) "+h,r.style.display="none",r.style.fontSize="12px",r.style.width="250px",r.style.margin="1ex auto")})}(document.getElementById("

　以下のソースコードをスライドショーを貼り付ける場所にコピーし、ご自身の写真データに書き換えてください。可能ならば、スタイルシート部分はHEAD内に移動してください。

・　別のアニメーションを見る: 前進と後進で動作方向が反転するもの。
　縦横スクロール　縦横視差スクロール　縦横入れ替わり　縦横転がり　縦横3D回転　縦横3D裏返し　縦横3D入れ替わり　縦横3D逆入れ替わり　縦横CUBE回転　縦横CUBE枠内回転　縦横コーナー回転　縦横連動ランダムズーム3D回転1 　縦横連動ランダムズーム3D回転2