[フリー][レスポンシブ]カルーセル連動スライドショー集 cpMHDs_ncasg_direct_os
別のスライドショーを見る(HOME)
・ スライドショーの説明
スライドショーデータは「ここからスライドショーのデータ。↓」以下のクラス名koboDataの要素です。 使用する要素は下の各型の説明を参照してください。
カルーセルサムネイルは、現在選択されているデータのサムネイルが画面の中央に自動的にスクロールします。 サムネイルの写真データはクラス名"gal_base"のdiv要素の中のimg要素です。 すべて同じアスペクト比の画像を用意してください。 このページでは横縦比が4:3の画像を使っています。 スライドショーデータとサムネイルデータは、同じ順番で同じ数を記述してください。
このスライドショーは、個人・商用を問わず無料で永久に自由に使用できます。 掲載しているソースコードのみで作動し、jQueryなどのライブラリー本体やそのプラグインも、Javascripやcssの外部ファイルも不要です。 ただし、ソース内「カスタマイズ」の下に記述されている著作権表記を削除したり変更したりする事を禁止します。
このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください(「名前を付けて保存」で文字コードを指定するなど)。異なる文字コードが混在すると、文字化けの原因になります。
・ マルチデータ型でアスペクト比維持型
img要素の写真でも、写真や文章などをひとまとめにしたBLOCK要素でも、スライドさせる事ができるスライドショーです。レスポンシブデザインへの対応がアスペクト比維持型のため、表示部分と同じアスペクト比ならばimg要素も使用できる訳です。 表示部分を写真(img要素)と同じアスペクト比にするには、表示部分のスタイルシートでpadding-top:~%;に写真の(高さ/幅)を%で書きます。
">
これはa要素の背景写真を利用したバナーデータです。クリックで指定したページが開きます。レスポンシブデザインへの対応では、アスペクト比維持型(写真中心の場合便利)としても高さ維持型(文章が多い場合はみ出しを防ぐ)としても使用できます。 背景画像のスタイルをbackground-size:contain;にして写真が枠内に収まるように表示しています。
これはdiv要素の背景写真を利用したBLOCKデータです。この様に文章などのコンテンツを差し込む事ができます。 スタイルシートを、background-image:url('写真のURL');background-repeat:no-repeat;background-position:center;background-size:~;などとしてください。 このデータの背景画像のbackground-sizeは85%。
定型カード型のデータ
ここにカードのコメントを書いてください。カードの中身はHTMLで装飾可能です。このサンプルでは「写真」「題名」「コメント」の3要素で作っていますが、自由にデザインを変更できます。ただし、スマホで表示したときにコンテンツがはみ出さない様に注意してください。
これはa要素の背景写真を利用したバナーデータです。背景画像のスタイルをbackground-size:cover;にして写真を枠全体に表示しています。サムネイル用の写真は、統一したサイズのIMG要素で作り、クラス名「gal_base」のdiv要素の中にスライドショーと同じ順番で書いてください。
これはdiv要素の背景写真を利用したBLOCKデータです。スライドショーのデータはクラス名「base」のdiv要素の中に順番に書いてください。IMGデータ・バナーデータ・BLOCKデータを混在させる事ができます。 このデータの背景画像のbackground-sizeはcontain。
定型カード型のデータ
ここにカードのコメントを書いてください。カードの中身はHTMLで装飾可能です。このサンプルでは「写真」「題名」「コメント」の3要素で作っていますが、自由にデザインを変更できます。ただし、スマホで表示したときにコンテンツがはみ出さない様に注意してください。
▲
!function(n){var //--------- カスタマイズ↓ ---------- ds = 5000, //--スライドショー速度(ミリ秒単位)。 da = 1200, //--アニメーション速度(ミリ秒単位)。 y = true, //--自動開始はtrue、手動開始はfalse。 //--------- カスタマイズ↑ ----------
Copyright = "Miyake_kobo", HomePage = "http://miyake.g2.xrea.com/", MailAddress = "miyake_kobo@yahoo.co.jp", ContentType = "Free Slideshow", af=
,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
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,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&&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
"))
以下のソースコードをスライドショーを貼り付ける場所にコピーし、ご自身の写真データに書き換えてください。 可能ならば、スタイルシート部分はHEAD内に移動してください。
・ BLOCKデータ型で高さ維持型
divなどのBLOCK要素をデータにするスライドショーです。 レスポンシブデザインへの対応は高さ維持型のため、文章が多い場合ははみ出しを防ぐ効果があります。 表示部分のスタイルシートheigtht:~;で高さを固定してください。
写真を表現するときは、img要素ではなく、BLOCK要素の背景画像に写真を設定します。 スタイルbackground-size:cover;で画面いっぱいに表示し、あたかも写真のスライドショーの様にする事もできます。 また、background-size:contain;にすれば、形の違う写真を一定の枠内に表示できます。
">
データにdiv要素を使用すると中身をHTMLで自由に編集でき、内側にこの様なdiv要素を作って文章やリンクや画像やバナーなどを入れる事もできます。データはクラス名koboDataです。背景画像のスタイルをbackground-size:cover;にして写真を枠全体に表示しています。
これはa要素の背景写真を利用したバナーデータです。クリックで指定したページが開きます。レスポンシブデザインへの対応では、アスペクト比維持型(写真中心の場合便利)としても高さ維持型(文章が多い場合はみ出しを防ぐ)としても使用できます。 背景画像のスタイルをbackground-size:contain;にして写真が枠内に収まるように表示しています。
これはdiv要素の背景写真を利用したBLOCKデータです。この様に文章などのコンテンツを差し込む事ができます。 スタイルシートを、background-image:url('写真のURL');background-repeat:no-repeat;background-position:center;background-size:~;などとしてください。 このデータの背景画像のbackground-sizeは85%。
定型カード型のデータ
ここにカードのコメントを書いてください。カードの中身はHTMLで装飾可能です。このサンプルでは「写真」「題名」「コメント」の3要素で作っていますが、自由にデザインを変更できます。ただし、スマホで表示したときにコンテンツがはみ出さない様に注意してください。
データにdiv要素を使用すると中身をHTMLで自由に編集でき、内側にこの様なdiv要素を作って文章やリンクや画像やバナーなどを入れる事もできます。データはクラス名koboDataです。背景画像のスタイルをbackground-size:cover;にして写真を枠全体に表示しています。
これはa要素の背景写真を利用したバナーデータです。背景画像のスタイルをbackground-size:cover;にして写真を枠全体に表示しています。サムネイル用の写真は、統一したサイズのIMG要素で作り、クラス名「gal_base」のdiv要素の中にスライドショーと同じ順番で書いてください。
データにdiv要素を使用すると中身をHTMLで自由に編集でき、内側にこの様なdiv要素を作って文章やリンクや画像やバナーなどを入れる事もできます。データはクラス名koboDataです。背景画像のスタイルをbackground-size:contain;にして写真を枠内に収めて表示しています。
これはdiv要素の背景写真を利用したBLOCKデータです。スライドショーのデータはクラス名「base」のdiv要素の中に順番に書いてください。IMGデータ・バナーデータ・BLOCKデータを混在させる事ができます。 このデータの背景画像のbackground-sizeはcontain。
データにdiv要素を使用すると中身をHTMLで自由に編集でき、内側にこの様なdiv要素を作って文章やリンクや画像やバナーなどを入れる事もできます。データはクラス名koboDataです。背景画像のスタイルをbackground-size:cover;にして写真を枠全体に表示しています。
定型カード型のデータ
ここにカードのコメントを書いてください。カードの中身はHTMLで装飾可能です。このサンプルでは「写真」「題名」「コメント」の3要素で作っていますが、自由にデザインを変更できます。ただし、スマホで表示したときにコンテンツがはみ出さない様に注意してください。
▲
!function(n){var //--------- カスタマイズ↓ ---------- ds = 5400, //--スライドショー速度(ミリ秒単位)。 da = 1400, //--アニメーション速度(ミリ秒単位)。 y = true, //--自動開始はtrue、手動開始はfalse。 //--------- カスタマイズ↑ ----------
以下のソースコードをスライドショーを貼り付ける場所にコピーし、ご自身の写真データに書き換えてください。 可能ならば、スタイルシート部分はHEAD内に移動してください。
・ img要素データ型でアスペクト比維持型
img要素の写真か、(写真を背景画像にした)a要素のバナーを、スライドさせるスライドショーです。下の見本の様に写真とバナーが混在していても構いません。レスポンシブデザインへの対応はアスペクト比維持型です。高さ維持型ではimg要素の写真が伸びてしまいます。 表示部分を写真と同じアスペクト比にするには、表示部分のスタイルシートでpadding-top:~%;に写真の(高さ/幅)を%で書きます。
">
▲
!function(n){var //--------- カスタマイズ↓ ---------- ds = 5600, //--スライドショー速度(ミリ秒単位)。 da = 1000, //--アニメーション速度(ミリ秒単位)。 y = true, //--自動開始はtrue、手動開始はfalse。 //--------- カスタマイズ↑ ----------
以下のソースコードをスライドショーを貼り付ける場所にコピーし、ご自身の写真データに書き換えてください。 可能ならば、スタイルシート部分はHEAD内に移動してください。
別のスライドショーを見る(HOME)
All Rights Reserved. Copyright (C) 2002- Miyake_kobo.