簡易イメージスライダーなどに使える！jqueryでclassをスイッチさせる方法

ノンプラグインで実装するイメージスライダーなどに

jqueryでお馴染みのカルーセルプラグイン。
ただ、ちょっとした用途でプラグインは重いなぁとか、設定やサイトへの適応で少なからずかかる手間など考えると少し躊躇してしまう場合があります。

あとはエフェクトをもうちょっとこうしたい･･･という時のメンテナンス性もjqueryで書かれていると都合が悪かったりもするので、エフェクトはCSS3に任せて、jquery側はclassのスイッチだけにとどめるコンセプトで簡単なコードを書いてみました。

1 ノンプラグインで実装するイメージスライダーなどに
2 コンセプト
- 2.1 CSS
- 2.2 jquery
3 ちょっと覚えておくと便利かも

コンセプト

前述したように、基本的にモーションはCSS3に書きます。

CSS

@keyframes fadein {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.imgWrap{
  width: 800px;
  height: 600px;
  margin: 0 auto;
  animation: fadein 3s;
}

.imgWrap img{
  width: 800px;
}

.js-imgSlider {
  position: relative; }

.js-imgSlider__item {
  position: absolute;
  opacity: 0;
  -webkit-transition: all 5s ease;
  -moz-transition: all 5s ease;
  -ms-transition: all 5s ease;
  -o-transition: all 5s ease;
  transition: all 5s ease;
  -webkit-transform: translate(-50px, 0);
  -moz-transform: translate(-50px, 0);
  -ms-transform: translate(-50px, 0);
  -o-transform: translate(-50px, 0);
  transform: translate(-50px, 0); }

  .js-imgSlider__item--on {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0); }

  .js-imgSlider__item--off {
    opacity: 0;
    -webkit-transform: translate(50px, 0);
    -moz-transform: translate(50px, 0);
    -ms-transform: translate(50px, 0);
    -o-transform: translate(50px, 0);
    transform: translate(50px, 0); }

今回は左からスライドしながらフェードインして、少し置いて右へフェードアウトする仕様にしました。

デフォルトは-50pxの位置に置いて、スイッチが入った時に0pxの位置へ、スイッチが切れた時に50px左へ、という動きで書いてあります。

jquery

$(function(){

	var wrapClass = '.js-imgSlider';
	var itemClass = '.js-imgSlider__item';
	var imgOff = 'js-imgSlider__item--off';
	var imgOn = 'js-imgSlider__item--on';

	var i = 0;

  var imgslider = function(){
	  $(wrapClass).find(itemClass).eq(i).queue(function(next){
			$(this).prev().removeClass(imgOff);
			$(this).removeClass(imgOn).addClass(imgOff);
			$(this).next().addClass(imgOn);

			if( i === 0){
				$(itemClass).eq(2).removeClass(imgOff);
			};
    	if( i == 2){
				$(itemClass).eq(0).addClass(imgOn);
			};
			next();
		});

		i++;
		if( i == 3 ){
			i = 0;
		};
	};

	setInterval(imgslider, 6000);

});

説明するほどのものでもないですが一応解説を。

スライドさせたい要素で表示されているi番目の要素を軸に、手前の要素からクラス-offを削除、軸の要素にクラス-offを追加、次の要素にクラス-onを追加、という動きをさせています。

あとはsetIntervalで繰り返し処理のみ、というシンプルな作りです。