ColorFullWeb

カラーがフルな情報配信ブログ。Web関係多め。

【javascriptメモ】流行りの全画面表示スライドをカスタマイズしてみる【jQuery】

time 2013/04/17

title.js

こんにちわ。@i_saku39です。
以前の記事で触れましたが
jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験というコードを読んでいます。
取り急ぎメモしておきたかったので記事として残しておきます。

まず、何をカスタマイズしたか。

画像同士にマージンが入れられるようにカスタマイズしました。
 
 

まず、

	var $setElm = $('.wideslider'),
	baseWidth = 800,
	baseHeight = 500,

	slideSpeed = 500,
	delayTime = 5000,
	easing = 'linear',

	autoPlay = '1', // notAutoPlay = '0'

	btnOpacity = 0.5,
	pnOpacity = 0.5;

これを、

var $setElm = $('.wideslider'),
imgMargin = 150,//ココ!!
imgWidth = 800,//ココ!!
baseWidth = imgWidth + imgMargin,//ココ!!
baseHeight = 500,

slideSpeed = 500,
delayTime = 5000,
easing = 'linear',

autoPlay = '1', // notAutoPlay = '0'

btnOpacity = 0.5,
pnOpacity = 0.5;

というように変更します。
(マージンの値を変数に入れられるようにしただけです。)

 
 

次に


var baseWrapWidth = (baseListWidth)*(baseListCount);


var baseWrapWidth = (baseListWidth+imgMargin)*(baseListCount);

に変更。
(listひとつの大きさにマージンを足して正確なwrapサイズが出せるようにしてみました。)
 
 

さらに


var moveLeft = ((baseListWidth)*(setNum))+baseWrapWidth;


var moveLeft = ((baseListWidth+imgMargin)*(setNum))+baseWrapWidth;

下のボタンをクリックした時の動く距離にマージンをプラス

 
 

最後にCSS

.wideslider ul,
.wideslider ul li {
	float: left;
	display: inline;
	overflow: hidden;
text-align: center;/*centerを追加*/
}

CSSでマージンを加えた場所をcenter表示する

 
 
取り急ぎ、使えるようにした形なので
その他のまとめは近いうちにノシ

down

コメントする