Это вариант если вам нужно убирать интервал когда пользователь кликнул и больше не возвращать интервал:
let offset = 0;
const sliderLine = document.querySelector('.slider-line');
document.querySelector('.slider-next').addEventListener('click', function() {
offset = offset + 1327;
if (offset > 3981) {
offset = 0;
}
sliderLine.style.left = -offset + 'px';
clearInterval(window.interval)
});
window.interval = setInterval(() => (document.querySelector('.slider-next').click()), 2e3)
.slider {
overflow: hidden;
width: 1327px;
height: 777px;
}
.slider-line {
display: flex;
position: relative;
height: 777px;
left: 0;
transition: all ease 1s;
}
.slider-next {
position: absolute;
}
<div class="content-main__img">
<div class="slider">
<div class="slider-line">
<img src="./images/img02.png" class="content-main__img02">
<img src="./images/img02.png" class="content-main__img02">
<img src="./images/img02.png" class="content-main__img02">
<img src="./images/img02.png" class="content-main__img02">
</div>
<div class="content-main__container-button">
<a href="#" class="content-main__button"><img src="./images/button.png" alt="button" width="250px"></a>
</div>
<button class="slider-next">next</button>
</div>
</div>
А это вариант если вам нужно будет через таймут снова запустить интервал после клика пользователя:
let offset = 0;
const sliderLine = document.querySelector('.slider-line');
document.querySelector('.slider-next').addEventListener('click', () => {
clearTimeout(window.timeout)
offset = offset + 1327;
if (offset > 3981) {
offset = 0;
}
sliderLine.style.left = -offset + 'px';
clearInterval(window.interval)
window.timeout = setTimeout(() => {
window.interval = setInterval(() => (document.querySelector('.slider-next').click()), 2e3)
}, 3e3)
});
window.interval = setInterval(() => (document.querySelector('.slider-next').click()), 2e3)
.slider {
overflow: hidden;
width: 1327px;
height: 777px;
}
.slider-line {
display: flex;
position: relative;
height: 777px;
left: 0;
transition: all ease 1s;
}
.slider-next {
position: absolute;
}
<div class="content-main__img">
<div class="slider">
<div class="slider-line">
<img src="./images/img02.png" class="content-main__img02">
<img src="./images/img02.png" class="content-main__img02">
<img src="./images/img02.png" class="content-main__img02">
<img src="./images/img02.png" class="content-main__img02">
</div>
<div class="content-main__container-button">
<a href="#" class="content-main__button">
<img src="./images/button.png" alt="button" width="250px">
</a>
</div>
<button class="slider-next">next</button>
</div>
</div>
Ну и соответственно просто меняйте время интервала или таймуата чтобы регулировать скорость.
Объяснение (Учитываю только мой код)
Просто чиститься интервал из глоб. объекта.
В событии клика на .slider-next
убираем тайуат чтобы если пользователь снова нажмёт то тайуата не было бы, дальше чистим интервал чтобы не переключались слайдеры, а после через таймуат снова ставим тот же интервал, чтобы он снова автом. переключал слайдеры.
setInterval(() => (document.querySelector('.slider-next').click()), 2e3)
? Это конечно костыльный подход, но рабочий.