vertical sliderをautoplayしたい

以下を参考に作ったVertical Sliderを読み込み時にautoでスライドできるようにしようとしています。

https://www.learningrobo.com/2022/03/vertical-sp …

現在、参考ページと同様に、クリックすると左右のスライドがそれぞれ上下にスライドします。
これをボタンクリックを残したまま、読み込み時に自動でスライドできるようにしたいと思っています。scriptに2か所追加をいたしましたが、ボタンを押してもスライドせず、読み込み時も
自動でスライドしません。

何か解消方法などアドバイス頂けますと幸いです。
どうぞよろしくお願いいたします。

〇HTML
<div class="slider-container">
<div class="left-slide">
<div style="background-color: #2c9f45">
<h4>TEST</h4>
</div>
<div style="background-color: #c5080b">
<h4>TEST</h4>
</div>
<div style="background-color: #0386ad">
<h4>TEST</h4>
</div>
<div style="background-color: #001100">
<h4>TEST</h4>
</div>
</div>
<div class="right-slide">
<div class="bg-image1"></div>
<div class="bg-image2"></div>
<div class="bg-image3"></div>
<div class="bg-image4"></div>
</div>
</div>

〇JS
/*↓↓↓↓追加部分↓↓↓↓↓*/
window.onload = function() {
/*↑↑↑↑追加部分↑↑↑↑*/

const sliderContainer = document.querySelector(".slider-container");
const slideRight = document.querySelector(".right-slide");
const slideLeft = document.querySelector(".left-slide");
const upButton = document.querySelector(".up-button");
const downButton = document.querySelector(".down-button");
const slidesLength = slideRight.querySelectorAll("div").length;

let activeSlideIndex = 0;

slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`;

/*↓↓↓↓追加部分↓↓↓↓↓*/
for( ; ; activeSlideIndex++;){
$(slideRight).slideDown("normal");
$(slideLeft).slideUp("normal");
　　　　}
};
/*↑↑↑↑追加部分↑↑↑↑*/

const changeSlide = (direction) => {
const sliderHeight = sliderContainer.clientHeight;
if (direction === "up") {
activeSlideIndex++;
if (activeSlideIndex > slidesLength - 1) activeSlideIndex = 0;
} else if (direction === "down") {
activeSlideIndex--;
if (activeSlideIndex < 0) activeSlideIndex = slidesLength - 1;
}
slideRight.style.transform = `translateY(-${
activeSlideIndex * sliderHeight
}px)`;
slideLeft.style.transform = `translateY(${
activeSlideIndex * sliderHeight
}px)`;
};

upButton.addEventListener("click", () => changeSlide("up"));
downButton.addEventListener("click", () => changeSlide("down"));

〇CSS
.slider-container {
position: relative;
overflow: hidden;
width: 100%;
min-height: 100vh;
}

.left-slide {
height: 100%;
width: 35%;
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s ease-in-out;
}

.left-slide>div {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
padding: 3em;
}

.left-slide h4 {
font-size: 22px;
line-height: 32px;
color: #fff;
font-weight: 100;
text-transform: uppercase;
}

.right-slide {
height: 100%;
position: absolute;
top: 0;
right: 0;
width: 65%;
transition: transform 0.5s ease-in-out;
}

.right-slide>div {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
}

No.2 ベストアンサー 回答者： fujillin 回答日時： 2022/08/26 12:55

No1です。

お礼の
＞その後playボタンで再生した後、stopボタンをおすと停止しなくなりました。
は、playSlide() 内で変数intervalIDにIDを代入していないので、止められなくなっているものと思われます。

IDを取得するようにしても、ご提示のままだと、続けてplayボタンを何度も押すと、2重、3重に繰り返し処理が走るので、速度が上がった様になると推測します。
さらには、IDも上書きされてしまうので、停止できるのは最後のinterval処理だけとなって、やはり「止まらない」という事態が発生すると思われます。


HTML、CSSのクラス名などは書き換えてあるものとして、前回の1行の代わりに、以下を追加記述する形ではいかがでしょうか？
（不要になった古いイベント処理も削除してあるものとします）

const
stopSlide = () => {
clearInterval(intervalID);
intervalID = null;
},
playSlide = (e) => {
if(intervalID) return;
if(e!==1) changeSlide('up');
intervalID = setInterval(()=> changeSlide('up'), 5000);
};

let intervalID;
playSlide(1);
document.querySelector('.play-button').addEventListener('click', playSlide);
document.querySelector('.stop-button').addEventListener('click', stopSlide);

この回答へのお礼

fujillinさん

早速ありがとうございます。
教えて頂いたコードで自動再生、一時停止、再度再生、ともに動作確認できました。
いつも教えて頂きありがとうございます。

お礼日時：2022/08/26 15:59

No.1 回答者： fujillin 回答日時： 2022/08/25 17:31

こんにちは

＞読み込み時にautoでスライドできるようにしようとしています。
api的なものは用意されていないようですが、ごく単純な仕組みなので、changeSlide()をupまたはdownの引数で呼び出せばスライドするようになっています。

＞現在、参考ページと同様に、クリックすると左右のスライドが
＞それぞれ上下にスライドします。
であるなら、そのままで、スクリプトの最後に、
　let intervalID = setInterval(()=> changeSlide('up'), 3000);
の1行でも追加しておけば、自動でスライドするようになります。
（「3000」は動作の間隔（ms））

停止したい場合は、上記のintervalをclearすれば停止します。
https://developer.mozilla.org/ja/docs/Web/API/cl …

この回答へのお礼

fujillinさん、

早速ありがとうございます。
教えて頂いた1行を最後に追加いたしましたら、自動でスライドするようになりました！そして停止もできるようにいたしました。

そうしてみてみると、元々あった上下のボタンをやめて、「再生」と「一時停止」ボタンにした方がいいなあと以下のように変更してみましたが、自動再生後→stopボタンで停止、その後playボタンで再生した後、stopボタンをおすと停止しなくなりました。

何か解消方法などアドバイス頂けますと幸いです。
どうぞよろしくお願いいたします。

〇HTML
※up-buttonとdown-buttonをstop-button、play-buttonへ変更

〇JS　
※up-butoonとdown-buttonをplay-button、stop-buttonへ変更

追加→const playButton = document.querySelector(".play-button");
追加→const stopButton = document.querySelector(".stop-button");

～省略～
changeSlide変更なし
～省略～

/*↓↓↓↓追加部分↓↓↓↓↓*/
function stopSlide() {
clearInterval(intervalID);
intervalID = null;
}

function playSlide() {
setInterval(()=> changeSlide('up'), 5000);
}

　　　let intervalID = setInterval(()=> changeSlide('up'), 5000);
　　　stopButton.addEventListener("click", () => stopSlide());
　　　playButton.addEventListener("click", () => playSlide());
/*↑↑↑↑追加部分↑↑↑↑*/

お礼日時：2022/08/26 11:24