4

Помогите, пожалуйста. Есть сухой слайдер на чистом 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%);
}
<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 ответ 1

1

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

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

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

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

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

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.