レスポンシブ対応の画像スライダーを自作してみた

<div class="slide_container">
<div class="arrow prev"><i class="fas fa-angle-left"></i></div>
<div class="slide_adjust_container">
<div class="slide">
<img src="https://sample.com/slide-image1.jpg">
</div>
<div class="slide">
<img src="https://sample.com/slide-image2.jpg">
</div>
<div class="slide">
<img src="https://sample.com/slide-image3.jpg">
</div>
</div>
<div class="arrow next"><i class="fas fa-angle-right"></i></div>
</div>

jQuery(function($){

	// スライダーがない場合は処理を終了
	if($('.slide_container').length == 0) return;

	let slideId;
		
	$('.slide_container').each(function(i){
		$(this).attr('id', 'slide' + (i + 1));
		slideId = '#' + $(this).attr('id');
				
		$(slideId + ' .slide:first-of-type').addClass('active');
				
		// 矢印を表示
		resizeArrow();
		changeArrow();
				
		// ドットインジケーターを表示
		let pointerHtml = '<div class="pointer_container">';
		$(slideId + '.slide_container .slide').each(function(n){
			pointerHtml += '<div class="pointer" id="' + n + '"></div>';
		});
		pointerHtml += '</div>';
		$(slideId + '.slide_container').append(pointerHtml);
				
		$(slideId + ' .pointer:first-of-type').addClass('active');
		resizePointer();
	});
			
	// ドットインジケーターがクリックされたとき
	$('.pointer').click(function() {
		slideId = '#' + $(this).closest('.slide_container').attr('id');
		$(slideId + ' .active').removeClass('active');
		let selectSlideIndex = $(this).attr('id');
		$(slideId + ' .slide').eq(selectSlideIndex).addClass('active');
				
		slideImage();
	});

	// 次の矢印がクリックされたとき
	$('.next').click(function() {
		nextArrow($(this));
	});
			
	// 前の矢印がクリックされたとき
	$('.prev').click(function() {
		prevArrow($(this));
	});
	
	// ブラウザサイズを変えたときに正しい位置に写真を表示
	$(window).resize(function() {
		$('.slide_container').each(function(){
			slideId = '#' + $(this).attr('id');
			resizeArrow();
			resizePointer();
			slideImage();
		});
	});

  //  スワイプされたとき
	setSwipe();		
		
	// 表示領域に応じて矢印のサイズを変更
	function resizeArrow() {
		let arrowSize = $(slideId + ' .slide').outerWidth(true) * 0.1 + 'px';
		$(slideId + ' .arrow').css({ 'display': 'block', 'font-size': arrowSize, 'line-height': arrowSize });
	}
		
	// 表示領域に応じてドットインジケーターのサイズを変更
	function resizePointer() {
		let pointerSize = $(slideId + ' .slide').outerWidth(true) * 0.03 + 'px';
		$(slideId + ' .pointer').css({ 'display': 'inline-block', 'width': pointerSize, 'height': pointerSize, 'border-radius': pointerSize });
	}
		
	// 先頭と最後の写真では矢印を非表示にする
	function changeArrow() {
		let activeSlideIndex = $(slideId + ' .slide').index($(slideId + ' .active'));
		$(slideId + ' .arrow').show();
		if(activeSlideIndex == 0){
			$(slideId + ' .prev').hide();
		}else if(activeSlideIndex == $(slideId + ' .slide').length - 1){
			$(slideId + ' .next').hide();
		}
	}
		
	// 次の写真をアクティブにする
	function nextArrow($this) {
		slideId = '#' + $this.closest('.slide_container').attr('id');
		let $nowSlide = $(slideId + ' .slide.active');
		$(slideId + ' .active').removeClass('active');
		$nowSlide.next().addClass('active');
		slideImage();
	}
		
	// 前の写真をアクティブにする
	function prevArrow($this) {
		slideId = '#' + $this.closest('.slide_container').attr('id');
		let $nowSlide = $(slideId + ' .slide.active');
		$(slideId + ' .active').removeClass('active');
		$nowSlide.prev().addClass('active');
		slideImage();
	}
		
	// アクティブな写真を表示する
	function slideImage() {
		let activeSlideIndex = $(slideId + ' .slide').index($(slideId + ' .active'));
		let imageWidth = $(slideId + ' .slide').outerWidth(true);
		let slideWidth = activeSlideIndex * imageWidth;
		$(slideId + ' .slide_adjust_container').stop(true).animate({'right': slideWidth + 'px'}, 600);
				
		$(slideId + ' .pointer').eq(activeSlideIndex).addClass('active');
								
		changeArrow();
	}
		
	// スマホでスワイプしたときの動きを定義
	function setSwipe() {
		let startPosition;
		let endPosition;
		const judgmentDistance = 60;
			
		let trigger = document.querySelectorAll(".slide_container");
		trigger.forEach(function(target) {	
				
			// スマホにタッチしたとき
			target.addEventListener('touchstart', function(e) {
				e.stopPropagation();
				startPosition = e.touches[0].pageX;
				endPosition = 0;
			});
				
			// スマホでタッチを動かしたとき
			target.addEventListener('touchmove', function(e) {
				e.stopPropagation();
				endPosition = e.changedTouches[0].pageX;
			});
				
			// スマホでタッチを外れたとき
			target.addEventListener('touchend', function(e) {
				slideId = '#' + $(this).closest('.slide_container').attr('id');
				let activeSlideIndex = $(slideId + ' .slide').index($(slideId + ' .active'));
					
				if(endPosition != 0 && startPosition > endPosition + judgmentDistance) {
					// 一定距離より長く左にスワイプしたとき
					if(activeSlideIndex != $(slideId + ' .slide').length - 1) {
						// 現在が最後の写真でなければ次の写真を表示
						nextArrow($(this));
					}	
				}else if (endPosition != 0 && startPosition + judgmentDistance < endPosition) {
					// 一定距離より長く右にスワイプしたとき
					if(activeSlideIndex != 0) {
						// 現在が最初の写真でなければ前の写真を表示
						prevArrow($(this));
					}				
				}
			});
		});
	}
});

/* スライダー */
.slide_container {
    overflow: hidden;
    width: 800px;  /* スライダーと同じサイズ */
    max-width: 100%;
    position: relative;
    margin: 1.5em 0;
}

.slide_container::after {
    content: "";
    display: block;
    clear: both;
}

.slide_container .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    color: rgba(204,204,204,0.9);  /* 好きな色で */
    display: none;
}

.slide_container .next {
    right: 5px;
}

.slide_container .prev {
    left: 5px;
}

.slide_container .slide_adjust_container {
    width: 3200px;  /* 全てのスライダーが収まるように大きめのサイズ */
    position: relative;
}

.slide_container .slide_adjust_container .slide {
    float: left;
    width: 800px;  /* 好きなサイズで */
    height: 500px;  /* 好きなサイズで */
}

.slide_container .slide_adjust_container .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pointer_container {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 10;
}

.pointer_container .pointer {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 14px;
    min-width: 14px;  /* 小さくなり過ぎるのを防ぐ */
    min-height: 14px;
    background: rgba(204,204,204,0.9);  /* 好きな色で */
    display: none;
    margin-right: 5px;
    cursor: pointer;
}

.pointer_container .pointer.active {
    background: rgba(0,0,0,0.9);  /* 好きな色で */
}

@media(max-width:990px) {
    .slide_container,
    .slide_container .slide_adjust_container .slide {
        width: 100vw;
    }
	
    .slide_container .slide_adjust_container .slide {
        height: 250px; /* 好きなサイズで */
    }
}

function my_enqueue_script() {
    wp_enqueue_script('my-script', get_stylesheet_directory_uri() . '/myscript.js', array('jquery'));
}
add_action('wp_head', 'my_enqueue_script');