Помогите, пожалуйста. Есть сухой слайдер на чистом 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%); }
Ответ
Если хотите анимацию, вам нужно отказаться от display: none
Вместо этого задайте слайдам абсолютное позиционирование и opacity:0, а активному слайду задавайте opacity:1
Ну и transition: .3s для плавного перехода из прозрачности
Единственная проблема, нужно явно задать размеры родителя, ибо слайды будут абсолютно спозиционированы, но в принципе все слайдера работают именно так
Высоту самого большого слайда можно определить скриптом и задать эту высоту родителю
Комментариев нет:
Отправить комментарий