Анимация слайдера HTML CSS

#javascript #html #css

Помогите, пожалуйста. Есть сухой слайдер на чистом CSS и JS, как сделать чтобы была
хоть какая-то плавная анимация? Заранее спасибо



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%); }

					
						

							
							

								
Название дизайна карты
								
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.
								
							
						
						

							
							

								
Название дизайна карты
								
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.
								
							
						
						

							
							

								
Название дизайна карты
								
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.
								
							
						
					
				



    

Ответы

Ответ 1

Если хотите анимацию, вам нужно отказаться от display:  none

Вместо этого задайте слайдам абсолютное позиционирование и opacity:0, а активному
слайду задавайте  opacity:1

Ну и transition: .3s для плавного перехода из прозрачности

Единственная проблема, нужно явно задать размеры родителя, ибо слайды будут абсолютно
спозиционированы, но в принципе все слайдера работают именно так

Высоту самого большого слайда можно определить скриптом и задать эту высоту родителю