Как удалить последний слайд формы перехода - Javascript

Может кто-то помочь мне с этим? Я пытаюсь убрать этот уродливый переход с последнего слайда, но не знаю, как это сделать. Например, если счетчик доходит до последнего изображения, я хочу, чтобы первое изображение стало следующим, но мне удалось сделать только вращающийся переход. Может кто-нибудь посоветовать?

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>

Спасибо!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
57
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны клонировать первый слайд и добавить его в конец и остановить переход для этого. Итак, теперь вы не можете видеть анимацию до первого слайда, и она снова запускает анимацию.

Но для дальнейших изменений я рекомендую гладкий ползунок. Это мощная библиотека слайдеров

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>

Другие вопросы по теме