複数画像や要素を
カルーセル 複数画像や要素を
スライドさせる時のポイント

/* 移動させる距離は要素の横幅が基本となるので、移動距離のi.ilengthプロパティを用意する。
 * 表示させるフレームの横幅のプロパティ:i.wも用意。
 * 通常、CSSのtranslateで左へ移動させるには
 * x軸方向をマイナスさせないといけないので
 * 要素を一回左へ移動させるには次の式となる。
 * i.ilength= -1*i.w;
 * 複数画像を一括移動も一個だけの移動も、基本は表示枠が基本。
 * 複数表示で一個だけを移動させる場合は、一個のみの横幅を代わりに取得する。
 */
var i={
	_w: false,
	get w(){return this._w || parseInt(this.slideBox.getBoundingClientRect().width)},
	set w(v){ this._w= v;},
	_total: 7,/* 一番最初に設定*/
	get total(){return this._total;},
	set total(v){ this._total= v;},
	ilength: 0,
//他にも多数プロパティを設定
};
 
const bottuns = document.querySelectorAll('#next,#prev');
bottuns.forEach(function(item){
	/* 左右の矢印ボタンの処理
	 * data属性に右か左かの方向を設定してあるので
	 * それを取得し方向を決定
	 * また、矢印クリック時にはスライダーアイテムへクラス『on』を付与し
	 * ”transition: all 0.3s ease-out”を設定する。
	 * つまりその間だけアニメーションするということになる。
	 */
	item.addEventListener("click", (e) => {
		e.preventDefault();
		if((i.ilength<-1*i.w*i.total )||(i.ilength>-1*i.w)){ 
			i.sliderBar.classList.remove('on'); 
		}else{ 
			i.sliderBar.classList.add('on');
			i.d= e.currentTarget.dataset.direction; 
			slideIt(i.sliderBar, i);
		}
	});
});

function slideIt(sliderBar, i){
	/* 進む方向が左か右かによって距離を設定
	* その距離をtranslateで移動させる。要素にtransitionを設定しているので
	* ゆるゆるとアニメーションする
	*/
	i.distance={
		prev: i.ilength+i.w,
		next: i.ilength-i.w
	}; 
	i.ilength=i.distance[i.d] ;
	if((i.ilength>=-1*i.w*(i.total+1) )&&(i.ilength<=0)){
		sliderBar.style.transform= 'translate3d('+i.ilength+'px,0,0)';
	}
	
	/* スクロール処理後にスライダーアイテムがフレームからはみ出ていないかを判定する処理 */
	sliderBar.addEventListener("transitionend", function(e) {
		e.currentTarget.classList.remove('on');
		if(i.ilength<-1*i.w*(i.total) ){ i.ilength=-1*i.w;  resetTrans(sliderBar,i); }
		else if(i.ilength>-1*i.w){ i.ilength=-1*i.w*i.total;  resetTrans(sliderBar,i); }
	}, false);
}

/* フレームからはみ出た時に戻す処理 */
function resetTrans(sliderBar,i){
	sliderBar.style.transform= 'translate3d('+i.ilength+'px,0,0)';
}