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

通常、複数の画像や要素をスライドさせる必要がある時、たいていはクリックさせて詳細ページへ遷移というケースが多いと思われます。
そのため、画像だけでなく、タイトルや簡単な概要のテキストが一緒の場合が一般的と考えられます。
この場合、重要なのがレスポンシブ時の対応です。PCでの表示状態を保ったまま、スマホに移行させる時に縮小させたりすると、文字が小さくなり読めないといった不具合が発生します。
また、スライド時も表示枚数ずつ移動か、一枚づつ移動かなども顧慮する必要があります。
つまり、読みやすさなどを考慮すると下記のように考えられます。

スライドさせたい要素が記事でも画像であっても対応させたい場合、レスポンシブではA案一択。スライド時の切り替え枚数はA～DどれでもOKとなります。
ただ、効率を考えるとC案が一番利便性が高いかなと思います。理由としてはワンアクションで固定数づつ切り替わるのは、まどろっこしくて現代の時間感覚にはちょっと合わないかなと。

本サイトのTOPでも使用している複数要素のスライダーのバリエーションです。
TOPのスライダーは、マウスホイールが初期状態で水平スクロールに切り替わりますが、今回のサンプルでは初期状態はスクロールでは水平停止で、シフトキー併用でスクロールした時のみ水平スクロールするような仕様にしています。
まあ、私はいきなり水平スクロールが好きなんですが、万人向けを考慮するとこれもありかなと。

SHVSwiperの実働サンプル：https://labo.studio-happyvalley.com/swipeScroll/shvSwiper/

スワイプ機能はありませんが、スライダー上のどこでもクリックするとスライドします。
また、ワンアクションで表示されている複数画像が一括で切り替わります。

SHVSwiperの実働サンプル：https://labo.studio-happyvalley.com/swipeSlider/multi/

基本的な考え方の抜粋です。

/* 移動させる距離は要素の横幅が基本となるので、移動距離の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)';
}