検索
2013
6
30
スマホでフリックとかループとか色々カスタマイズできるスライダー作ってやんよ!!!（後編）
前回、前々回とスマホに対応したフリック式スライダーを自作してみよう！というエントリーを書かせていただきました。
スマホでフリックとかループとか色々カスタマイズできるスライダー作ってやんよ!!!（前編）
スマホでフリックとかループとか色々カスタマイズできるスライダー作ってやんよ!!!（中編）
前編でタッチイベントの仕組みやスライダーコンテンツを自作してプロトタイプのフリックスライダーを作成。 中編ではプロトタイプを踏まえての新設計とＵＩ改善とカスタマイズ・・・と思ったのですが、制作過程の解説がムダに長くなってしまったのでプラスαのカスタマイズを今回に持ち越しとなりました。今回で完結です。追加させたいカスタマイズ機能
前回新設計で作成したフリックスライダーがこちら これに前回の冒頭で追加させたい機能がこちらリアルタイムの画像取得を利用してサムネイルに視覚的にわかりやすいページネーション効果
一定時間で画像が切り替わるオートスライダー機能
これを追加させていきます。ページネーション機能の追加
CSSの変更・追加記述
ul.panelNavi {
margin: 0 auto;
width: 320px;
}
.panelNavi li {
float: left;
text-align: center;
width: 96px;
height: 122px;
margin: 5px;
display:inline-block;
}
.panelNavi li a{
display:block;
}
.panelNavi li a.imgHover{
border:#4ae 3px solid;
}
.panelNavi li a.imgNoHover{
border:#FFF 3px solid;
}
.panelNavi li.active{
border: 4px solid #44AAEE;
margin: 1px;
}
JavaScriptの変更・追加記述
thumbnail.eq(0).addClass("active");
function slideImg(next){
var pos;
if(slideCurrent < next){
pos = imgSize;
}else{
pos = -imgSize;
}
if(next == imgNum){
next = 0;
}else if(next == -1){
next = (imgNum - 1);
}
flickListImg.eq(next).css("margin-left", pos).stop(true, true).animate({marginLeft: "0"}, "fast");
flickListImg.eq(slideCurrent).stop(true, true).animate({marginLeft: -pos}, "fast");
thumbnail.eq(slideCurrent).removeClass("active");
thumbnail.eq(next).addClass("active");
slideCurrent = next;
}
基本的にはページロード時のサムネイル要素の１番最初にactiveクラスを付け、
スライドイベント時の処理にフリックまたはページャークリックの次に表示される画像にactiveクラスを付け、その前の画像に付いてたactiveクラスを削除する記述を追加しました。
デモではホバーされていない画像には背景と同色のボーダーで視覚的に間隔を取っていますが、背景が単色でない場合はCSS側で調整してください。
ページネーション追加デモ
これでサムネイルに現在表示されている画像が視覚的にわかるホバー機能が付きました。デモはこちら だいぶプラグインっぽくなってきたんではないでしょうかｗオートスライダー機能の追加
最後は一定のインターバルで自動でスライドするオートスライダー機能を追加させます。JavaScriptの追加記述
var autoSlide = true;
var autoSlideTimer = 3000;
if(autoSlide == true){
var loopSwitch = setInterval(loop, autoSlideTimer);
function loop(){
slideImg(imgCurrent + 1);
}
}
function slideImg(next){
if(autoSlide == true){
clearInterval(loopSwitch);
loopSwitch = setInterval(loop, autoSlideTimer);
}
var pos;
if(slideCurrent < next){
pos = imgSize;
}else{
pos = -imgSize;
}
if(next == imgNum){
next = 0;
}else if(next == -1){
next = (imgNum - 1);
}
flickListImg.eq(next).css("margin-left", pos).stop(true, true).animate({marginLeft: "0"}, "fast");
flickListImg.eq(slideCurrent).stop(true, true).animate({marginLeft: -pos}, "fast");
thumbnail.eq(slideCurrent).removeClass("active");
thumbnail.eq(next).addClass("active");
slideCurrent = next;
}
JavaScriptの追加記述の解説
フィールド値に変数autoSlideを作りtrueまたはfalseで機能のON/OFFを指定します。 続いて変数autoSlideTimerで自動でスライドするインターバルの設定をします。１秒 = 1000としてデモでは３秒間隔で画像が切り替わる設定にしてあります。 次に変数autoSlideがtrue（自動スライド機能がON）の場合の処理を記述します。 変数loopSwitchにsetInterval関数の引数に下のloop関数のトリガーとして代入し、画像スライド処理を実行させます。 最後にスライド移動ファンクションの中に画像がスライドされたらclearInterval関数で変数loopSwitchを初期値に戻す記述を追加します。オートスライダー完成デモ
上記のスクリプトを追加した３秒間隔で自動スライドするデモがこちら デモページでは分かりやす様にボタンでオートスライダー機能のON/OFFが切り替えが可能となっています。フリックスライダーについてまとめ
何となく作ってみた感覚でフリックスライダーを作成してみました。とりあえず当初の目的だった- １.フリック対応機能
- ２.ループ機能（最終的に切り替え機能は必要ないと判断しました）
- ３.タップしてもスライドさせられるページャー機能
- ４.サムネイル画像からもスライドできる機能
- ５.視覚的にわかりやすいページネーション効果
- ６.一定間隔で切り替わる自動スライド機能
