最近、jQueryを使ったカッコいい画像のスライドショーやコンテンツのスライダーが
めちゃめちゃ増えてきていますね。
ネットで検索したらたくさんありすぎてびっくりしました。
そこで、今日は（最近流行ってる？）ミライデンシのHPにも使っている
ブラウザウィンドウ画面の幅をめいっぱい使って
コンテンツ要素をスライドさせて魅せるコンテンツスライダーを僕が作った方法で紹介します。
jQueryでコンテンツがつながっているダイナミックなスライダーの作り方
サンプル
ミライデンシのHPで言うとこの部分ですね。
スライダーの中心にメインを表示するエリアを設置して
その前後の画像は左右に透過させたような形で
スライド要素をブラウザ枠めいっぱいに並べて配置しています。
さらにその左右の透過部分は、それぞれ「NEXT」「BACK」ボタンになっているので
クリックすると一枚ずつ移動するようになっています。
動作としてはこれくらいですかね。
ではさっそく基本となるHTMLの記述から
＜HTML＞
<div class="wideslider"> <ul> <li><a href="#"><img alt="" src="images/slider/01.jpg" /></a></li> <li><a href="#"><img alt="" src="images/slider/02.jpg" /></a></li> <li><a href="#"><img alt="" src="images/slider/03.jpg" /></a></li> <li><a href="#"><img alt="" src="images/slider/04.jpg" /></a></li> <li><a href="#"><img alt="" src="images/slider/05.jpg" /></a></li> </ul> </div>
IDやクラスを付けた任意のブロック要素の中に
＜ul＞リストを使って画像を並べます。
画像の枚数を増やすあるいは減らしたい場合は単純に＜li＞の数を変えるだけです。
＜CSS＞
style.css
/* スライダー */
.wideslider {
width: 100%;
height: 380px;
text-align: left;
position: relative;
overflow: hidden;
}
.wideslider ul,
.wideslider ul li {
float: left;
display: inline;
overflow: hidden;
}
.wideslider_base {
top: 0;
position: absolute;
}
.wideslider_wrap {
top: 0;
position: absolute;
overflow: hidden;
}
.slider_prev,
.slider_next {
top: 0;
overflow: hidden;
position: absolute;
z-index: 100;
cursor: pointer;
}
.slider_prev {background: #fff /*url(../images/slider/prev.jpg) no-repeat right center*/;}
.slider_next {background: #fff /*url(../images/slider/next.jpg) no-repeat left center*/;}
.pagination {
bottom: 10px;
left: 0;
width: 100%;
height: 15px;
text-align: center;
position: absolute;
z-index: 200;
}
.pagination a {
margin: 0 5px;
width: 15px;
height: 15px;
display: inline-block;
overflow: hidden;
background: #333;
}
.pagination a.active {
filter:alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}
.wideslider ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
.wideslider ul {
display: inline-block;
overflow: hidden;
width:1080px;
}
.wideslider img {
width:1080px;
height: 380px;
}
＜SCRIPT＞
wideslider.js
$(function(){
var $setElm = $('.wideslider'), //対象にするブロック要素名（IDでも可)
baseWidth = 1080, //スライドさせるコンテンツ要素の幅
baseHeight = 380, //スライドさせるコンテンツ要素の高さ
slideSpeed = 500, //スライドアニメーションのスピード
delayTime = 5000, //スライドアニメーションの待機時間
easing = 'linear', //スライドアニメーションのイージング
autoPlay = '1', // notAutoPlay = '0' 自動スライドON／OFF（ON = 1 , OFF = 0)
btnOpacity = 0.5, //左右のNEXT／BACKエリアの透過具合
pnOpacity = 0.5;
$setElm.each(function(){
var targetObj = $(this);
var widesliderWidth = baseWidth;
var widesliderHeight = baseHeight;
targetObj.children('ul').wrapAll('<div class="wideslider_base"><div class="wideslider_wrap"></div><div class="slider_prev"></div><div class="slider_next"></div></div>');
var findBase = targetObj.find('.wideslider_base');
var findWrap = targetObj.find('.wideslider_wrap');
var findPrev = targetObj.find('.slider_prev');
var findNext = targetObj.find('.slider_next');
var baseListWidth = findWrap.children('ul').children('li').width();
var baseListCount = findWrap.children('ul').children('li').length;
var baseWrapWidth = (baseListWidth)*(baseListCount);
var pagination = $('<div class="pagination"></div>');
targetObj.append(pagination);
var pnPoint = pagination.children('a');
var pnFirst = pagination.children('a:first');
var pnLast = pagination.children('a:last');
var pnCount = pagination.children('a').length;
pnPoint.css({opacity:(pnOpacity)}).hover(function(){
$(this).stop().animate({opacity:'1'},300);
}, function(){
$(this).stop().animate({opacity:(pnOpacity)},300);
});
pnFirst.addClass('active');
pnPoint.click(function(){
if(autoPlay == '1'){clearInterval(wsSetTimer);}
var setNum = pnPoint.index(this);
var moveLeft = ((baseListWidth)*(setNum))+baseWrapWidth;
findWrap.stop().animate({left: -(moveLeft)},slideSpeed,easing);
pnPoint.removeClass('active');
$(this).addClass('active');
if(autoPlay == '1'){wsTimer();}
});
var makeClone = findWrap.children('ul');
makeClone.clone().prependTo(findWrap);
makeClone.clone().appendTo(findWrap);
var allListWidth = findWrap.children('ul').children('li').width();
var allListCount = findWrap.children('ul').children('li').length;
var allLWrapWidth = (allListWidth)*(allListCount);
var windowWidth = $(window).width();
var posAdjust = ((windowWidth)-(baseWidth))/2;
findBase.css({left:(posAdjust),width:(baseWidth),height:(baseHeight)});
findPrev.css({left:-(baseWrapWidth),width:(baseWrapWidth),height:(baseHeight),opacity:(btnOpacity)});
findNext.css({right:-(baseWrapWidth),width:(baseWrapWidth),height:(baseHeight),opacity:(btnOpacity)});
$(window).bind('resize',function(){
var windowWidth = $(window).width();
var posAdjust = ((windowWidth)-(baseWidth))/2;
findBase.css({left:(posAdjust)});
findPrev.css({left:-(posAdjust),width:(posAdjust)});
findNext.css({right:-(posAdjust),width:(posAdjust)});
}).resize();
findWrap.css({left:-(baseWrapWidth),width:(allLWrapWidth),height:(baseHeight)});
findWrap.children('ul').css({width:(baseWrapWidth),height:(baseHeight)});
var posResetNext = -(baseWrapWidth)*2;
var posResetPrev = -(baseWrapWidth)+(baseWidth);
if(autoPlay == '1'){wsTimer();}
function wsTimer(){
wsSetTimer = setInterval(function(){
findNext.click();
},delayTime);
}
findNext.click(function(){
findWrap.not(':animated').each(function(){
if(autoPlay == '1'){clearInterval(wsSetTimer);}
var posLeft = parseInt($(findWrap).css('left'));
var moveLeft = ((posLeft)-(baseWidth));
findWrap.stop().animate({left:(moveLeft)},slideSpeed,easing,function(){
var adjustLeft = parseInt($(findWrap).css('left'));
if(adjustLeft == posResetNext){
findWrap.css({left: -(baseWrapWidth)});
}
});
var pnPointActive = pagination.children('a.active');
pnPointActive.each(function(){
var pnIndex = pnPoint.index(this);
var listCount = pnIndex+1;
if(pnCount == listCount){
pnPointActive.removeClass('active');
pnFirst.addClass('active');
} else {
pnPointActive.removeClass('active').next().addClass('active');
}
});
if(autoPlay == '1'){wsTimer();}
});
}).hover(function(){
$(this).stop().animate({opacity:((btnOpacity)+0.1)},100);
}, function(){
$(this).stop().animate({opacity:(btnOpacity)},100);
});
findPrev.click(function(){
findWrap.not(':animated').each(function(){
if(autoPlay == '1'){clearInterval(wsSetTimer);}
var posLeft = parseInt($(findWrap).css('left'));
var moveLeft = ((posLeft)+(baseWidth));
findWrap.stop().animate({left:(moveLeft)},slideSpeed,easing,function(){
var adjustLeft = parseInt($(findWrap).css('left'));
var adjustLeftPrev = (posResetNext)+(baseWidth);
if(adjustLeft == posResetPrev){
findWrap.css({left: (adjustLeftPrev)});
}
});
var pnPointActive = pagination.children('a.active');
pnPointActive.each(function(){
var pnIndex = pnPoint.index(this);
var listCount = pnIndex+1;
if(1 == listCount){
pnPointActive.removeClass('active');
pnLast.addClass('active');
} else {
pnPointActive.removeClass('active').prev().addClass('active');
}
});
if(autoPlay == '1'){wsTimer();}
});
}).hover(function(){
$(this).stop().animate({opacity:((btnOpacity)+0.1)},100);
}, function(){
$(this).stop().animate({opacity:(btnOpacity)},100);
});
});
});
スライドのアニメーションのスピードや画像の幅や高さは
このスクリプトで設定します。
もっとカスタマイズしたい！という方は、
jQueryのイージングプラグインを使えば、簡単にダイナミックな動きをするスライダーが作れます。
最後に
このスライダーもそうですし、最近はどんどん新しいUI、カッコいいUIの情報が出てきていますよね。
これからも、僕が個人的にカッコいいものや流行のものを紹介していきます。
追記
大変申し訳ありませんが、上記のスライダーをコピペで作れるようにしていたつもりだったのですが、
「動かない」というお声を頂いて確認したところ、一部記入漏れがありました。
現在は修正したので、上記のコードで動くと思います。
これからもよろしくお願いします。
