Help me please. There is a dry slider on pure CSS and JS, how to make sure that there is at least some smooth animation? Thank you in advance

var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex-1].style.display = "flex"; } 
 .slider { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 100px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 100px; } .slider i { font-size: 40px; cursor: pointer; color: #2df3ab; } .slider i[onclick="plusDivs(-1)"] { padding-right: 30px; } .slider i[onclick="plusDivs(1)"] { padding-left: 30px; } .slider .mySlides { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background-color: #050505; -webkit-box-shadow: 2px 2px 8px rgba(45, 243, 171, 0.15); box-shadow: 2px 2px 8px rgba(45, 243, 171, 0.15); border-radius: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 35px 30px 35px 30px; } .slider .mySlides .card-desc { padding-left: 60px; } .slider .mySlides .card-desc h1 { color: #ffffff; font-size: 36px; font-weight: 700; line-height: 50px; text-transform: uppercase; } .slider .mySlides .card-desc p { color: #f2f2f2; font-size: 16px; font-weight: 400; line-height: 25px; margin-top: 30px; } .slider .mySlides .card-desc button { color: #ffffff; width: 374px; height: 65px; font-size: 24px; font-weight: 500; line-height: 20.7px; text-transform: uppercase; -webkit-box-shadow: 0 3px 10px rgba(255, 255, 255, 0.75); box-shadow: 0 3px 10px rgba(255, 255, 255, 0.75); border: none; outline: none; cursor: pointer; border-radius: 33px; background-image: -webkit-gradient(linear, left bottom, left top, from(#bc24fb), to(#1d6bff)); background-image: linear-gradient(to top, #bc24fb 0%, #1d6bff 100%); } 
 <div class="slider"> <button onclick="plusDivs(-1)" class="far fa-arrow-alt-circle-left"></button> <div class="mySlides"> <img src="img/card.png" alt="Фото карты"> <div class="card-desc"> <h1>Название дизайна карты</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> <button>Заказать этот дизайн</button> </div> </div> <div class="mySlides"> <img src="img/card.png" alt="Фото карты"> <div class="card-desc"> <h1>Название дизайна карты</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> <button>Заказать этот дизайн</button> </div> </div> <div class="mySlides"> <img src="img/card.png" alt="Фото карты"> <div class="card-desc"> <h1>Название дизайна карты</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> <button>Заказать этот дизайн</button> </div> </div> <button onclick="plusDivs(1)" class="far fa-arrow-alt-circle-right"></button> </div>

    1 answer 1

    If you want an animation, you need to abandon display: none

    Instead, set the slides to absolute positioning and opacity:0 , and set the active slide to opacity:1

    Well, transition: .3s for a smooth transition from transparency

    The only problem is that you need to explicitly set the size of the parent, because the slides will be absolutely positioned, but in principle all the sliders work this way

    The height of the largest slide can be defined by the script and set this height to the parent.

    • If the answer helped, put a tick, and if not - ask additional questions, try to solve your problem - Anatoly Shevelev