Как сделать слайдер, картинки, которого будут переворачиваться

У меня есть код, он работает. Картинки переворачиваются и все нормально, кроме текста, т.е. он появляется друг на друге, это можно исправить? enter image description here enter image description here

<div class="text-slider">Интересные Личности</div>
        <div class="contair-two">
            <div class="img-two">
                <div class="slider-container">
                    <div class="slider">
                        <div class="rotate-block">
                            <div class="change-img">
                              <div class="front-side-img"><img src="Фотки-page1/Петр-1.jpg"></div>
                              <div class="back-side-img"><p>Пётр I Алексе́евич — последний царь всея Руси (с 1682 года) и первый Император Всероссийский (с 1721 года). Петра I считают одним из наиболее выдающихся государственных деятелей, определившим направление развития России в XVIII веке</p></div>
                              <div class="front-side-img" ><img src="Фотки-page1/Шереметев.jpg"></div>
                              <div class="back-side-img"><p>Бори́с Петро́вич Шереме́тев— русский воинский начальник (воевода) времён Северной войны, дипломат, один из первых русских генерал-фельдмаршалов (с 1701 года), граф (с 1706 года).</p></div>
                              <div class="front-side-img"><img src="Фотки-page1/Меньшиков.jpg"></div>
                              <div class="back-side-img"><p>Александр Данилович Меншиков - родился в г. Москве 6 ноября 1673г., и погиб 12 ноября 1729г, в г. Березово Сибирской губернии. Занимал должность первого генерала-губернатора Санкт-Петербурга с 1703 по 1724 и с 1725 по 1727</p></div>
                              <div class="front-side-img"><img src="Фотки-page1/Апраксин.jpg"></div>
                              <div class="back-side-img"><p>Фёдор Матве́евич Апра́ксин— один из создателей Армейского флота и Российского военно-морского флота, сподвижник Петра I, генерал-адмирал, первый президент Адмиралтейств-коллегии</p></div>
                              <div class="front-side-img"><img src="Фотки-page1/Голицын.jpg"></div>
                              <div class="back-side-img"><p>Князь Михаи́л Миха́йлович Голи́цын — русский полководец, генерал-фельдмаршал и президент Военной коллегии , соратник царя Петра I, участник Северной войны 1700—1721 годов</p></div>
                              <div class="front-side-img"><img src="Фотки-page1/Репнин.jpg"></div>
                              <div class="back-side-img"><p>Князь Аники́та Ива́нович Репни́н — русский военачальник и государственный деятель, генерал-фельдмаршал, участник Северной войны. Первый генерал-губернатор Рижской губернии , второй по счёту  Президент Военной коллегии</p></div>
                              <div class="front-side-img"><img src="Фотки-page1/Дивиер.jpg"></div>
                              <div class="back-side-img"><p>Анто́н Мануи́лович Девие́р  — сподвижник Петра I, генерал-адъютант, первый генерал-полицмейстер Санкт-Петербурга, генерал-аншеф.</p></div>
                              <div class="front-side-img"><img src="Фотки-page1/Крюйс.jpg"></div>
                              <div class="back-side-img"><p>Крюйс Корнелий (или Корнилий) Иванович; Ставангер — русский адмирал норвежского происхождения, первый командующий Балтийским флотом.</p></div>
                            </div>
                        </div>
                    </div>
                    <button class="prev-button" aria-label="Посмотреть предыдущий слайд">&lt;</button>
                    <button class="next-button" aria-label="Посмотреть следующий слайд">&gt;</button>
                  </div>
            </div>    
        </div>
    </div>

/*слайдер*/
.page-title {
    text-align: center;
  }
  
  .slider-container {
    position: relative;
    width: 100%;
    height: 32vw;
    margin: 0 auto;
    overflow: hidden;
  }
  
  .slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  
  .slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .prev-button,
  .next-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 5%;
    height: 5%;
    background-color: transparent;
    border: none;
    font-size: 2vw;
    color: white;
  }
  
  .prev-button {
    left: 1%;
  }
  
  .next-button {
    right: 1%;
  }
/*конец слайдера*/

/*текст на картинках*/
.rotate-block {
  width: 100%;
  height: 32vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #C8534F;
  color: #FBEFEF;
}
/* Изображение */
.change-img {
  width: 100%;
  height: 10vw;
  position: relative;
  perspective: 1000px;
}
.change-img:hover .front-side-img {
  transform: rotateY(180deg);
}
.change-img:hover .back-side-img {
  transform: rotateY(360deg);
}
/* Стороны изображения */
.front-side-img, .back-side-img {
  position: absolute;
  width: 100%;
  height: 15vw;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
  backface-visibility: hidden;
 }
.front-side-img img {
  height: auto;
}
.back-side-img img {
  height: auto;
  transform: scaleX(-1);/* Отражаем изображение по горизонтали */
}
.back-side-img {
  transform: rotateY(180deg);
}

/*конец текста под картинками*/
/*генератор фактов*/
.contair-three{
  margin-left: auto;
  margin-top: 20%;
  margin-right: auto;
  background-color: rgb(200, 83, 79);
  width: 50%;
  height: 30%;
}
/**/
.slider-container-s {
  width: 70%;
  display: flex;
  margin-left: 15%;
}
input{
  width: 35%;
  margin-left: 16%;
  height: 5vw;
  margin-top: 15%;
}
#image-container {
  width: 100%;
  height: 70%;
  overflow: hidden;
  border: 3vw solid #C8534F;
}

.slider-image {
  display: none;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.slider-image.active {
  display: block;
}

// Получаем элементы слайдера
const slider = document.querySelector('.slider');
const prevButton = document.querySelector('.prev-button');
const nextButton = document.querySelector('.next-button');
const slides = Array.from(slider.querySelectorAll('img'));
const slideCount = slides.length;
let slideIndex = 0;

// Устанавливаем обработчики событий для кнопок
prevButton.addEventListener('click', showPreviousSlide);
nextButton.addEventListener('click', showNextSlide);

// Функция для показа предыдущего слайда
function showPreviousSlide() {
  slideIndex = (slideIndex - 1 + slideCount) % slideCount;
  updateSlider();
}

// Функция для показа следующего слайда
function showNextSlide() {
  slideIndex = (slideIndex + 1) % slideCount;
  updateSlider();
}

// Функция для обновления отображения слайдера
function updateSlider() {
  slides.forEach((slide, index) => {
    if (index === slideIndex) {
      slide.style.display = 'block';
    } else {
      slide.style.display = 'none';
    }
  });
}
updateSlider();

Пробовал в отдельные div брать не получилось