＊jQueryをはじめとしたライブラリを使用しない、画像スライダーのサンプルです＊
画像のスライダーはjQueryやそれを利用したライブラリ（slickなど）を利用することが多いかと思いますが、脱jQueryの流れもあり、どうしてもライブラリを使用したくない場合もあるかと思います。
そこで今回はjQueryはもちろん、ライブラリなどを一切使用していない画像スライダーのサンプルを作成しました。
プログラムで自動的にスクロールさせることで、スライドするようになっています。
＊プログラムの解説＊
１clientWidthとscrollWidth
clientWidthは「ボックス（要素）の幅（スクロール分は含めない）」を取得するものであり、scrollWidthは「スクロール分を含めた幅」の取得です。
これにより、PCやスマートフォンなどのデバイスによる幅の違いに関わらず、適切なスクロール量を調整しています。
２if構文
スクロール量が一定値を超えたらスクロールさせる方向が切り替わるように、条件分岐をしています。
３setIntervalとclearInterval
一気にスクロールさせてしまわないように、setIntervalメソッドで少しずつスクロールさせています。
また、if構文の条件に当てはまったらsetIntervalを解除しないとスクロール方向を切り替えられないので、clearIntervalメソッドで解除しています。
４requestAnimationFrame
clearIntervalメソッドで解除するのは良いのですが、そのままだと1度きりでスライド（スクロール）が終わってしまうので、処理の最後にrequestAnimationFrameを呼び出し、スライドが繰り返されるようにしています。
【 CSS・JavaScript 】
上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）
HTML・CSS・JavaScript
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.sample_title01 {
font-family: sans-serif;
font-weight: bold;
mix-blend-mode: soft-light;
width: fit-content;
margin: 0 auto;
position: relative;
top: 4rem;
font-size: 1.2rem;
letter-spacing: 2px;
color: white;
transform: rotate(-10deg);
text-shadow: 3px 3px 2px black;
}
.overflow_slide_box {
display: flex;
overflow: hidden;
width: 100%;
max-width: 600px;
margin: 0 auto;
box-shadow: 4px 4px 4px 2px grey;
border-radius: 23% 20% 45% 25% / 35% 35% 35% 40%;
}
.overflow_slide_box img {
width: 600px;
vertical-align: middle;
}
</style>
</head>
<body>
<p class="sample_title01">☁ 空の写真スライダー ☀</p>
<div class="overflow_slide_box">
<div class="overflow_slide_img overflow_slide_img1">
<img src="https://web-de-asobo.net/wp-content/uploads/2021/06/aozora.jpg" alt="青空の写真">
</div>
<div class="overflow_slide_img overflow_slide_img1">
<img src="https://web-de-asobo.net/wp-content/uploads/2021/06/yuuyake.jpg" alt="夕空の写真">
</div>
<div class="overflow_slide_img overflow_slide_img1">
<img src="https://web-de-asobo.net/wp-content/uploads/2021/06/yoruzora.jpg" alt="夜の空の写真">
</div>
</div>
<script type="text/javascript" defer>
{
const overflow_slide_box = document.querySelector('.overflow_slide_box');
const overflowBox = overflow_slide_box.clientWidth; //ボックスの幅を取得
const overflowBoxAll = overflow_slide_box.scrollWidth; //スクロール分を含めた横幅を取得
let scrollXR = 0;
let scrollXL = overflowBoxAll - overflowBox; //スクロール分の幅から既に表示されている幅を引く
const scrollMove = function () {
const scrollWindowRight = setInterval( ()=> {
scrollXR++;
scrollXL = overflowBoxAll - overflowBox;
overflow_slide_box.scrollTo(scrollXR,0);
if (scrollXR > overflowBoxAll - overflowBox) { //右端までスクロールしたら止める
clearInterval(scrollWindowRight);
const scrollWindowLeft = setInterval( () => {
scrollXL--;
scrollXR--;
overflow_slide_box.scrollTo(scrollXL,0);
if (scrollXL <= 0) { //左端までスクロールしたら止める
clearInterval(scrollWindowLeft);
requestAnimationFrame(scrollMove); //最後にアニメーションを呼び出す
}
},10)
}
},10);
}
requestAnimationFrame(scrollMove); //アニメーション
}
</script>
</body>
</html>
