[オープン][S][レスポンシブ]3ボタンのカルーセルスライドショーcpSHD_nx2Ca0_3b_os

[オープン][S][レスポンシブ]3ボタンのカルーセルスライドショーcpSHD_nx2Ca0_3b_os

<style type="text/css">

/** 全体。max-width:～px;に最大表示サイズを書く。 **/
.cpSHD_nx2Ca0_3b_os{position:relative;top:0px;left:0px;overflow:hidden;}
.cpSHD_nx2Ca0_3b_os .waku{position:relative;top:0px;left:0px;width:80%;max-width:640px;margin:auto;}

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

/** 個々のデータ。 **/
.cpSHD_nx2Ca0_3b_os .base .koboData{position:absolute;top:0px;left:0px;width:100%;height:100%;}

/** ボタン。transition-duration:～s;は出没アニメーション速度。 **/
.cpSHD_nx2Ca0_3b_os .but_sl{position:absolute;top:0px;left:0px;bottom:0px;right:0px;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.5);}
.cpSHD_nx2Ca0_3b_os:hover .but_sl{width:80px;height:80px;opacity:1;line-height:80px;font-size:16px;}
.cpSHD_nx2Ca0_3b_os .mae{position:absolute;top:0;bottom:0;left:0;margin:auto 0px;z-index:20;color:#fff;background-color:rgba(0,0,0,0.5);border-radius:50%;height:50px;width:50px;cursor:pointer;box-sizing:border-box;opacity:0;transition-duration:.5s;}
.cpSHD_nx2Ca0_3b_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_nx2Ca0_3b_os:hover .mae{left:30px;opacity:1;}
.cpSHD_nx2Ca0_3b_os .tugi{position:absolute;top:0;bottom:0;right:0px;margin:auto 0px;z-index:20;color:#fff;background-color:rgba(0,0,0,0.5);border-radius:50%;height:50px;width:50px;cursor:pointer;box-sizing:border-box;opacity:0;transition-duration:.5s;}
.cpSHD_nx2Ca0_3b_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_nx2Ca0_3b_os:hover .tugi{right:30px;opacity:1;}

</style>

"use strict";!function(n){var

//--------- 書き換える部分↓ ----------

ke = 5000,		//--スライドショー速度（ミリ秒単位）。
	ya = 1000,		//--アニメーション速度（ミリ秒単位）。

//--------- 書き換える部分↑ ----------

Copyright = "Miyake_kobo",
    HomePage = "https://miyake.cloudfree.jp/",
    MailAddress = "miyake_kobo@yahoo.co.jp",
    ContentType = "Open version Slideshow",

e=n.querySelector(".waku"),r=e.querySelector(".base"),b=r.innerHTML,s;r.innerHTML=b+b;var u=r.querySelectorAll(".koboData"),y=e.querySelector(".but_sl"),k=e.querySelector(".mae"),d=e.querySelector(".tugi"),i=u.length,et=window.getComputedStyle(u[0],"").transitionDuration,h,t=i/2,tt=0,o=!0,p=!1,c=Copyright,l=HomePage,g=MailAddress,it=ContentType,a={iy:i,ya:ya,ke:ke},f=document.createElement("a"),v=function(n){p||(n<i/4&&(n+=i/2,w(u[t+i/2])),n>i*3/4&&(n-=i/2,w(u[t-i/2])),tt=t,t=n,t+=a[c.substr(1,2)],t%=a[g.substr(1,2)],setTimeout(rt,100))},rt=function(){p=!0;clearTimeout(h);r.style.transitionDuration=ya+"ms";w(u[t]);setTimeout(function(){r.style.transitionDuration="0ms";o&&nt();p=!1},a[g.substr(2,2)]+50)},nt=function(){clearTimeout(h);h=setTimeout(function(){v(t+1)},a[g.substr(4,2)])};document.querySelector(".c_"+c)||(document.body.appendChild(f),f.setAttribute("href",l),f.setAttribute("class","c_"+c),f.innerHTML=it+" Ref (C) "+c,f.style.display="none",f.style.margin="1ex",f.style.fontSize="small");var w=function(n){r.style.left=-n.offsetLeft/e.offsetWidth*100+"%"},ut=function(n,t){n.style.left=101*t+"%"},ft=function(n){r.style.transitionProperty="left";r.style.left=-n.offsetLeft/e.offsetWidth*100+"%"};if(document.querySelector(".c_"+c).href===l){for(s=0;s<i;s++)ut(u[s],s);k&&(k.onclick=function(){v(t-1)});d&&(d.onclick=function(){v(t+1)});y&&(y.innerHTML=o?"pause":"play",y.onclick=function(){o?(clearTimeout(h),o=!1,this.innerHTML="play"):(o=!0,this.innerHTML="pause",v(t+1))});ft(u[t]);o&&nt()}}(document.getElementById("sl_wd_ca"))

・　サンプルの説明: 　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　同じサイズ（同じアスペクト比であれば可）の写真を使うスライドショーです。スライドショー用の写真はクラス名"base"のdiv要素の中に、クラス名"koboData"のimg要素で記述してください。; 　操作ボタンは三つで、モバイルではタップ、パソコンではマウスを重ねると出てきます。; 　小さいデバイスで表示してもアスペクト比を維持して縮小し、レスポンシブデザインに対応しています。; 　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できますが、スクリプト内「書き換える部分」の下にある著作権表記を消す事を禁止します。有料版はありません。

⇔

・　HEAD内のソース: 　スライドショーを貼り付けるページのHEAD内にコピーしてください。

・　BODY内のソース: 　スライドショーを貼り付ける場所にコピーし、ご自身の写真データに書き換えてください。このページの見本は画像のURLを相対表記で書いているため、このままでは画像が表示されません。

All Rights Reserved. Copyright (C) 2002- Miyake_kobo.