Может кто-то помочь мне с этим? Я пытаюсь убрать этот уродливый переход с последнего слайда, но не знаю, как это сделать. Например, если счетчик доходит до последнего изображения, я хочу, чтобы первое изображение стало следующим, но мне удалось сделать только вращающийся переход. Может кто-нибудь посоветовать?
let rowItemContaner = document.querySelectorAll(".row-item");
let playRowSlider;
for (let i = 0; i < rowItemContaner.length; i++) {
let rowContainerTransition = rowItemContaner[i].querySelectorAll(".row-pic");
let rowSlides = 0;
let rowMaxSlides = rowContainerTransition.length;
let goToRowSlide = function (slide) {
rowContainerTransition.forEach((container, index) => {
container.style.transform = `translateX(${100 * (index - slide)}%)`;
});
};
goToRowSlide();
let nextRowSlide = function (slide) {
if (rowSlides === rowMaxSlides - 1) {
rowSlides = 0;
} else {
rowSlides++;
}
goToRowSlide(rowSlides);
};
const initRowSlidex = function () {
goToRowSlide(0);
};
initRowSlidex();
let repertRowSlides = () => {
playRowSlider = setInterval(function () {
nextRowSlide(rowSlides);
}, 2000);
};
repertRowSlides();
}.row {
display: grid;
grid-template-columns: 24% 24% 24% 24%;
justify-content: space-between;
}
.row-img {
object-fit: contain;
/* position: absolute; */
box-shadow: none;
}
.row-item {
position: relative;
border: 2px solid var(--border-color-button);
box-shadow: 0 0 5px rgb(0 0 0 / 84%);
height: 280px;
overflow: hidden;
}
.row-pic {
position: absolute;
width: 100%;
height: 100%;
transition: 1s ease-out;
}
.rov-container {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
.row-link {
position: absolute;
width: 100%;
height: 100%;
display: inline-block;
top: 0;
left: 0;
/* background-color: rebeccapurple; */
}
.row-item > a {
object-fit: contain;
display: inline-block;
height: auto;
}
.row-img-difrent {
object-fit: contain;
}<div class = "row">
<div class = "row-item">
<div class = "row-pic">
<div class = "rov-container">
<img class = "row-img" loading = "lazy" src = "https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk = " alt = "" />
<a class = "row-link" href = "index.html"></a>
</div>
</div>
<div class = "row-pic">
<div class = "rov-container">
<img class = "row-img" loading = "lazy" src = "https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk = " alt = "" />
<a class = "row-link" href = "index.html"></a>
</div>
</div>
<div class = "row-pic">
<div class = "rov-container">
<img class = "row-img" loading = "lazy" src = "https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk = " alt = "" />
<a class = "row-link" href = "index.html"></a>
</div>
</div>
<div class = "row-pic">
<div class = "rov-container">
<img class = "row-img" loading = "lazy" src = "https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk = " alt = "" />
<a class = "row-link" href = "index.html"></a>
</div>
</div>
<p class = "row-text">Šporeti električni test</p>
</div>
<div class = "row-item">
<div class = "row-pic">
<div class = "rov-container">
<img class = "row-img" loading = "lazy" src = "https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk = " alt = "" />
<a class = "row-link" href = "index.html"></a>
</div>
</div>
<div class = "row-pic">
<div class = "rov-container">
<img class = "row-img" loading = "lazy" src = "https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk = " alt = "" />
<a class = "row-link" href = "index.html"></a>
</div>
</div>
<div class = "row-pic">
<div class = "rov-container">
<img class = "row-img" loading = "lazy" src = "https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk = " alt = "" />
<a class = "row-link" href = "index.html"></a>
</div>
</div>
<div class = "row-pic">
<div class = "rov-container">
<img class = "row-img" loading = "lazy" src = "https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk = " alt = "" />
<a class = "row-link" href = "index.html"></a>
</div>
</div>
<div class = "row-pic">
<div class = "rov-container">
<img class = "row-img" loading = "lazy" src = "https://media.istockphoto.com/photos/freedom-chains-that-transform-into-birds-charge-concept-picture-id1322104312?b=1&k=20&m=1322104312&s=170667a&w=0&h=VQyPkFkMKmo0e4ixjhiOLjiRs_ZiyKR_4SAsagQQdkk = " alt = "" />
<a class = "row-link" href = "index.html"></a>
</div>
</div>
<p class = "row-text">Šporeti električni test</p>
</div>
</div>Спасибо!



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы должны клонировать первый слайд и добавить его в конец и остановить переход для этого. Итак, теперь вы не можете видеть анимацию до первого слайда, и она снова запускает анимацию.
Но для дальнейших изменений я рекомендую гладкий ползунок. Это мощная библиотека слайдеров
let rowItemContaner = document.querySelectorAll(".row-item");
let playRowSlider;
for (let i = 0; i < rowItemContaner.length; i++) {
rowItemContaner[i].lastChild.after(rowItemContaner[i].getElementsByClassName("row-pic")[0].cloneNode(true));
rowItemContaner[i].lastChild.setAttribute('class', 'row-pic clone');
let rowContainerTransition = rowItemContaner[i].querySelectorAll(".row-pic");
let rowSlides = 0;
let rowMaxSlides = rowContainerTransition.length;
let goToRowSlide = function (slide) {
rowContainerTransition.forEach((container, index) => {
if ( slide === 0 ) {
container.style.transition = "0s"
} else {
container.style.transition = "1s ease-out"
}
container.style.transform = `translateX(${100 * (index - slide)}%)`;
});
};
goToRowSlide();
let nextRowSlide = function (slide) {
if (rowSlides === rowMaxSlides - 1) {
rowSlides = 0;
} else {
rowSlides++;
}
goToRowSlide(rowSlides);
};
const initRowSlidex = function () {
goToRowSlide(0);
};
initRowSlidex();
let repertRowSlides = () => {
playRowSlider = setInterval(function () {
nextRowSlide(rowSlides);
}, 2000);
};
repertRowSlides();
}.row {
display: grid;
grid-template-columns: 24% 24% 24% 24%;
justify-content: space-between;
}
.row-img {
object-fit: contain;
/* position: absolute; */
box-shadow: none;
}
.row-item {
position: relative;
border: 2px solid var(--border-color-button);
box-shadow: 0 0 5px rgb(0 0 0 / 84%);
height: 280px;
overflow: hidden;
}
.row-pic {
position: absolute;
width: 100%;
height: 100%;
transition: 1s ease-out;
}
.rov-container {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
.row-link {
position: absolute;
width: 100%;
height: 100%;
display: inline-block;
top: 0;
left: 0;
/* background-color: rebeccapurple; */
}
.row-item > a {
object-fit: contain;
display: inline-block;
height: auto;
}
.row-img-difrent {
object-fit: contain;
}<div class = "row">
<div class = "row-item">
<div class = "row-pic">
<div class = "rov-container">
<img class = "row-img" loading = "lazy"
src = "https://picsum.photos/id/237/600/400"
alt = "" />
<a class = "row-link" href = "index.html"></a>
</div>
</div>
<div class = "row-pic">
<div class = "rov-container">
<img class = "row-img" loading = "lazy"
src = "https://picsum.photos/id/238/600/400"
alt = "" />
<a class = "row-link" href = "index.html"></a>
</div>
</div>
<div class = "row-pic">
<div class = "rov-container">
<img class = "row-img" loading = "lazy"
src = "https://picsum.photos/id/239/600/400"
alt = "" />
<a class = "row-link" href = "index.html"></a>
</div>
</div>
<div class = "row-pic">
<div class = "rov-container">
<img class = "row-img" loading = "lazy"
src = "https://picsum.photos/id/240/600/400"
alt = "" />
<a class = "row-link" href = "index.html"></a>
</div>
</div>
</div>
</div>