Задача <Собственная История>

 <ul id="presentation"> 
        <li class="slide" id="slide1"> 
            <div class="character"></div> 
            <p class="story-text">Это первая страница нашей истории.</p> 
        </li> 
        <li class="slide" id="slide2"> 
            <div class="character"></div> 
            <p class="story-text">На второй странице мы встречаем нового героя.</p> 
        </li> 
        <li class="slide" id="slide3"> 
            <div class="character"></div> 
            <p class="story-text">Третья страница полна приключений.</p> 
        </li> 
        <li class="slide" id="slide4"> 
            <div class="character"></div> 
            <p class="story-text">На четвертой странице происходит неожиданный поворот.</p> 
        </li> 
        <li class="slide" id="slide5"> 
            <div class="character"></div> 
            <p class="story-text">И наконец, на пятой странице мы приходим к заключению.</p> 
        </li> 
 </ul> 

 body { 
    margin: 0; 
    font-family: Arial, sans-serif; 
} 
 
#presentation { 
    position: relative; 
    width: 100vw; 
    height: 100vh; 
    overflow: hidden; 
} 
 
.slide { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    opacity: 0; 
    transition: opacity 1s; 
} 
 
.character { 
    width: 100px; 
    height: 100px; 
    background-image: url('character.png'); /* Замените на путь к изображению персонажа */ 
    background-size: cover; 
    margin-bottom: 20px; 
} 
 
.story-text { 
    font-size: 24px; 
    color: white; 
    text-align: center; 
} 
 
#slide1 { background-color: rgba(255, 0, 0, 0.5); } 
#slide2 { background-color: rgba(0, 255, 0, 0.5); } 
#slide3 { background-color: rgba(0, 0, 255, 0.5); } 
#slide4 { background-color: rgba(255, 255, 0, 0.5); } 
#slide5 { background-color: rgba(255, 0, 255, 0.5); } 
 

 let currentSlide = 0; 
const slides = document.querySelectorAll('.slide'); 
 
const showSlide = (index) => { 
    slides.forEach((slide, i) => { 
        slide.style.opacity = i === index ? '1' : '0'; 
    }); 
};
 
const nextSlide = () => { 
    currentSlide = (currentSlide + 1) % slides.length; 
    showSlide(currentSlide); 
};
 
showSlide(currentSlide); 
setInterval(nextSlide, 3000); // Меняем слайд каждые 3 секунды