【jQuery】イメージスライダーの作り方

今回はjQueryを使ってイメージスライダーを作ってみたいと思います。

ついついプラグインを使いがちですが自分で作ったほうがカスタマイズしやすいのでなるべく自分で作りたいところですね!

イメージスライダーのサンプルを見る

HTML


<div id="imgSliderWrap">

<div id="imgSlider" class="clearfix">

<div class="sliderImg">
<a href="#"><img src="img01.png" alt=""></a>
</div>


<div class="sliderImg">
<a href="#"><img src="img02.png" alt=""></a>
</div>


<div class="sliderImg">
<a href="#"><img src="img03.png" alt=""></a>
</div>

</div>

<span id="arrowL"><i class="fas fa-chevron-circle-left"></i></span>
<span id="arrowR"><i class="fas fa-chevron-circle-right"></i></span>
</div>


<div id="sliderNavigationWrap">

<div id="sliderNavigation" class="clearfix">
<span class="sliderCercle sliderNow"></span>
<span class="sliderCercle"></span>
<span class="sliderCercle"></span>
</div>

</div>

</div>

JavaScript

$(function(){
//スライダーイメージ1つ分のwidthを取得
var sliderW = $('.sliderImg').width();
//スライダーイメージの個数を取得
var sliderLength = $('.sliderImg').length;
//現在何個目かを示す
var imgCurrent = 0;
//#imgSliderのwidthを設定
var maxWidth = sliderW * sliderLength;
$('#imgSlider').css('width',maxWidth);
//#imgSliderを動かす関数
var imgSlider = function(){
$('#imgSlider').stop().animate({
left: -sliderW*imgCurrent,
},1000);
//スライダーイメージのループ処理
if(imgCurrent >= sliderLength){
$('#imgSlider').stop().animate({
left: 0,
},500);
imgCurrent = 0;
};
//スライダーイメージのループ処理
if(imgCurrent < 0){
$('#imgSlider').stop().animate({
left: -sliderW*(sliderLength-1),
},500);
imgCurrent = sliderLength-1;
};
};
//カレント表示用関数
var currentNextFunc = function(){
$('#sliderNavigation span').eq(imgCurrent).addClass('sliderNow');
var prev1current = imgCurrent - 1;
$('#sliderNavigation span').eq(prev1current).removeClass('sliderNow');
};
var currentPrevFunc = function(){
$('#sliderNavigation span').eq(imgCurrent).addClass('sliderNow');
var next1current = imgCurrent + 1;
$('#sliderNavigation span').eq(next1current).removeClass('sliderNow');
if(imgCurrent == sliderLength-1){
$('#sliderNavigation span').eq(0).removeClass('sliderNow');
imgCurrent = imgCurrent++;
};
};
//矢印をクリックした時の処理
$('#arrowR').click(function(){
imgCurrent++;
imgSlider();
currentNextFunc();
});
$('#arrowL').click(function(){
imgCurrent--;
imgSlider();
currentPrevFunc();
});
});

解説

ざっくり説明すると「#imgSlider」というdivの中に横並びになっているイメージ画像が入ってます。

1枚の画像が横幅800pxだとして3枚入っているとしたら2,400pxの横長のdivですね。

イメージ画像の表示領域以外は「overflow:hidden」で非表示にしているのでこの「#imgSlider」を左右に動かすことで画像が切り替わっているようにみえるという仕組みです。

イメージスライダーの説明画像

横並びイメージ画像の全幅を取得する

まずやることは「#imgSlider」の全幅をCSSで指定することです。

単純に横幅800pxの画像3枚で2,400pxと指定してしまうと画像が増えた時に再度CSSを修正しなければなりません。

だからイメージ画像の横幅と数を取得して全幅を割り出します。

全幅を出す計算式は以下の通りですのでそれぞれの数値を変数に格納していきます。

全幅 = イメージ画像1つのwidth × イメージ画像の個数

//スライダーイメージ1つ分のwidthを取得
var sliderW = $('.sliderImg').width();
//スライダーイメージの個数を取得
var sliderLength = $('.sliderImg').length;
//#imgSliderのwidthを設定
var maxWidth = sliderW * sliderLength;

これでmaxWidthという変数に全幅を格納できたのでCSSに記述します。


$('#imgSlider').css('width',maxWidth);

 

#imgSliderを動かす関数を作る

次に#imgSliderを動かす関数を作ります。

ここではjQueryのanimateメソッドを使って動かしていきます。

予め親要素の#imgSliderWrapには「position: relative;」をかけておきました。

#imgSliderには「position: absolute;」をかけておけばanimateメソッドで動かすことができます。

//#imgSliderを動かす関数
var imgSlider = function(){
$('#imgSlider').stop().animate({
left: -sliderW*imgCurrent,
},1000);
};

#imgSliderを動かす関数として「imgSlider」を作成しました。
img画像1枚のwidthが800pxなので左基準位置を-800pxにすれば2枚目のimgが見えるようになりますね。

3枚目のimgを見せたければimg2つ分のwidth分で-1600pxになります。

これを数式に当て込むと以下のようになります。

– (imgのwidth × 現在の順番(何枚目の画像か))

現在何個目の画像なのかがわかればその数をimgのwidthと掛け算すれば動かすべきpx数がわかります。

最初は0なので以下のように変数を指定しておきます。

//現在何個目かを示す
var imgCurrent = 0;

この状態ですとimgCurrentが0なので何も動きませんね。
なのでスライダーの右にあるボタンを押したタイミングでimgCurrentに+1します。
その後、すぐに#imgSliderを動かす関数を実行すれば#imgSliderの左基準位置が-800pxになり2枚目が表示されるようになります。

それではスライダーの左右にある画像送りボタンを押した時の処理を書いていきましょう。

//矢印をクリックした時の処理
$('#arrowR').click(function(){
imgCurrent++;
imgSlider();
});
$('#arrowL').click(function(){
imgCurrent--;
imgSlider();
});

右ボタンに「#arrowR」というIDをつけて、左ボタンには「#arrowL」というIDをつけています。
そこをクリックしたら関数を実行するという記述です。

クリックしたタイミングで現在何個目かを示す「imgCurrent」の数が増減するようになってます。

「#arrowR」をクリックしたら1つ増えますし、「#arrowL」をクリックしたら1つ減ります。

「imgCurrent」に値を入れることができたら#imgSliderを動かす関数を実行することで画像が指定のピクセル数動きます。

画像送りのループ処理について

よく見るイメージスライダーとして、3枚目の画像が表示されている状態で右のボタンをおすと1枚目を表示するというものがありますね。

今回はこのループ処理も実装してます。

これは現在何個目かを表す「imgCurrent」の数値を操作すればOKです。

3枚目を表示している状態で右のボタンを押したとすると「imgCurrent」にいれたいのは0ですね。

なのでJSの記述としては以下のようになります。

if(imgCurrent >= sliderLength){
$('#imgSlider').stop().animate({
left: 0,
},500);
imgCurrent = 0;
};

if文を使っていますね。
もし、「imgCurrent」がimgの個数よりも増えるようなことがあれば左基準位置を0にして、「imgCurrent」の中の数値を0にするという記述になります。

それではこの逆で1枚目を表示している状態で左のボタンを押したとするとどうなるでしょうか。
JSの記述としては以下のようになります。

 
if(imgCurrent < 0){
$('#imgSlider').stop().animate({
left: -sliderW*(sliderLength-1),
},500);
imgCurrent = sliderLength-1;
};

3枚目を表示したいのでimg2つ分の1600pxを左基準位置としたいですね。
そうするためにimgの枚数マイナス1をした数と1枚あたりのwidthを掛け合わせた数値を左基準位置になるようにしています。

この時点で「imgCurrent」には2が入っていてほしいので「sliderLength-1」を「imgCurrent」に入れています。

カレント表示用関数を作る

カレント表示はイメージスライダーの下にまるポチがついていて今何枚目を表示しているのかを見せるためのものです。

この部分のHTMLは以下のようになってます。


<div id="sliderNavigationWrap">

<div id="sliderNavigation" class="clearfix">
<span class="sliderCercle sliderNow"></span>
<span class="sliderCercle"></span>
<span class="sliderCercle"></span>
</div>

</div>

このspan要素に「.sliderNow」というクラスをつければまるポチの色が変わるという仕組みです。

すでにこれまでのJS記述で現在何枚目の画像なのかを表す「imgCurrent」が用意されているのでこれを使います。

何個目のspan要素にクラスをつけるのかを指定するためにはjQueryのeq()メソッドを使います。

以下のように書けば指定した個数目の要素にクラスをつけることができます。

$('#sliderNavigation span').eq(imgCurrent).addClass('sliderNow');

この状態ですと1個目、2個目両方にクラスがついてしまっているので1つ前のspan要素についているクラスを外す必要がありますね。
以下のように書けば外すことができます。

var prev1current = imgCurrent - 1;
$('#sliderNavigation span').eq(prev1current).removeClass('sliderNow');

これらのカレント表示の記述を関数にしてまとめると以下のようになります。

var currentNextFunc = function(){
$('#sliderNavigation span').eq(imgCurrent).addClass('sliderNow');
var prev1current = imgCurrent - 1;
$('#sliderNavigation span').eq(prev1current).removeClass('sliderNow');
};

「currentNextFunc」というカレント表示用の関数がこれでつくれました。
しかし、これは右ボタンを押した時に利用する関数です。
この逆もつくる必要があります。

左ボタンを押した時に利用するカレント表示用の関数は以下のようになります。

var currentPrevFunc = function(){
$('#sliderNavigation span').eq(imgCurrent).addClass('sliderNow');
var next1current = imgCurrent + 1;
$('#sliderNavigation span').eq(next1current).removeClass('sliderNow');

if(imgCurrent == sliderLength-1){
$('#sliderNavigation span').eq(0).removeClass('sliderNow');
imgCurrent = imgCurrent++;
};

こちらは3枚目を表示している時に1枚目のカレント用クラスを外すという処理を入れています。

以上で必要な変数、関数を作ることができましたのでイメージ送りのボタンを押した時に関数を実行するように以下の記述をして完成です。

$('#arrowR').click(function(){
imgCurrent++;
imgSlider();
currentNextFunc();
});

$('#arrowL').click(function(){
imgCurrent--;
imgSlider();
currentPrevFunc();
});

こちらの記事もいかがですか?

【jQuery】メガドロップダウンメニューの作り方

メガドロップダウンメニューをjQueryを使って作ってみたいと思います。 まずはサンプルを見てみてください。 マウスカーソルがグローバルナビゲーションにマウスオーバーするとメガドロップダウンメニューが出てきます。 メガド […]

XAMPPのセキュリティ設定をわかりやすく解説!

前回の記事「WordPress構築のためにMacでXAMPPをインストールしてみた」でMacにXAMPPをインストールしました。 今回はXAMPPを使う前にやっておいた方がいいセキュリティ設定をしていきたいと思います。 […]

WordPressでオリジナル画像のSNSボタンを作る方法

WordPressでブログを作る時に必要なのがSNSボタン。 このSNSボタンがないとユーザーに拡散してもらえません。 今の時代、SNSでの拡散は必須ですね。 今回は、以下4種類のオリジナル画像のSNSボタンを作る方法を […]

Profile

HONU

Honu

どうも、Web制作に詳しい人です。デザイン含めてフロントエンド周りをいじるのが好きです。何やらいろいろな記事を書いてきましたがこれからはなるべくWeb制作の話中心に記事を書いていこうと思ってますのでよかったら見ていってください。

詳しいプロフィールはこちら

ホヌログ

Webフロントエンジニアのブログ