Как оптимизировать смену изображений?

Question

[Сергей Соболь]

Сейчас при смене картинок и текста происходит пролаг страницы, который мешает даже плавно перейти к якорной ссылке. Подскажите, как правильно сделать этот автоматический слайдер, который должен меняться каждые 2.5 секунды?

Сейчас это сделано с помощью чистого JS вот так:

const slides = document.querySelectorAll('.last__project');

let index = 0;

const activeSlide = n => {
  for(slide of slides) {
    slide.classList.remove('active');
  }
  slides[n].classList.add('active');
}

const prepareCurrentSlide = ind => {
    activeSlide(ind);
}

const nextSlide = () => {
  if(index == slides.length - 1) {
    index = 0;
    prepareCurrentSlide(index);
  } else {
    index++;
    prepareCurrentSlide(index);
  }
}

const interval = setInterval(nextSlide, 2500);

HTML:

<section class="last" id="last">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h2 class="last__title">
                        Последние проекты
                    </h2>
                    <div class="last__project active">
                        <h6 class="last__project-title">
                            Разработка Landing Page для <br> "Silent Cities”
                        </h6>
                    </div>
                    <div class="last__project last__project_one ">
                        <h6 class="last__project-title">
                            Разработка интернет-магазина для <br> "Womazing”
                        </h6>
                    </div>
                    <div class="last__project last__project_two">
                        <h6 class="last__project-title">
                            Разработка Landing Page для <br> "Тайны оперы”
                        </h6>
                    </div>
                    <div class="last__project last__project_three">
                        <h6 class="last__project-title">
                            Разработка коммерческого сайта для <br> "Silent Agency"
                        </h6>
                    </div>
                </div>
            </div>
        </div>
    </section>

Comments

[Алексей Ярков]

И где тут картинки?

[Сергей Соболь]

Алексей Ярков, через background прописаны