Como puede ver, hice un control deslizante de imagen con HTML y CSS. El problema es que no puedo hacer desaparecer el texto en la primera imagen del control deslizante.

HTML:

 <div class="slider-frame"> <div class="slider-images"> <div class="image-container"> <img src="./Images/Image1.jpg"> <h2 class="first-img-main-text">Main Text</h2> <p class="first-img-text">Caption</p> <a class="first-img-btn">Button</a> </div> </div> </div>

CSS:

 .image-container img { width: 1681px; height: 750px; animation-name: slide_animation; animation-duration: 25s; animation-iteration-count: infinite; @keyframes slide_animation { 0% {transform: translateX(0);} 11% {transform: translateX(0);} 22% {transform: translateX(-100%);} 33% {transform: translateX(-100%);} 44% {transform: translateX(-200%);} 55% {transform: translateX(-200%);} 66% {transform: translateX(-100%);} 77% {transform: translateX(-100%);} 88% {transform: translateX(0);} 100% {transform: translateX(0);} }

Para ser honesto, no sé cómo usar JavaScript tanto.

JavaScript:

 // Button const firstImageBtn = document.querySelector('.first-img-btn'); // Text const mainText = document.querySelector('.first-img-main-text'); const caption = document.querySelector('.first-image-text'); // Animations const slideAnimation = document.getAnimations('slide_animation'); // Event Listeners // Button Animations firstImageBtn.addEventListener('mouseover', function(){ firstImageBtn.style.background = '#000'; firstImageBtn.style.transition = '0.6s'; }); firstImageBtn.addEventListener('mouseout', function(){ firstImageBtn.style.background = 'none'; firstImageBtn.style.transition = '0.4s'; }); // Text Animations mainText.addEventListener('change', function(){ if (slideAnimation.style.transform <= 'translateX(-20%)') { mainText.style.filter = 'opacity(0)'; } });