Как реализовать, что бы слайды в слайдере не дергались и не прыгали?

Question

Есть блок с отзывами, в нем три слайда, два первых по содержанию одинаковые, третий по содержанию намного меньше, соответственно, когда переключаю со второго на третий и с третьего на первый или второй, блок то увеличивается то уменьшается! Подскажите какие стили применить, что бы слайды не дергались и не прыгали в зависимости от контента? Что бы в будущем, если я захочу добавить более объёмный отзыв всё отображалось нормально!

const buttonPrev = document.querySelector(".slider__prev");
buttonNext = document.querySelector(".slider__next");
slides = document.querySelectorAll(".slider__item");
dots = document.querySelectorAll(".slider__button");


let index = 0;

const activeSlide = (n) => {
  for (slide of slides) {
    slide.classList.remove("slider__item--active");
  }
  slides[n].classList.add("slider__item--active");
};


const activeDots = (n) => {
  for (dot of dots) {
    dot.classList.remove("slider__button--active");
  }
  dots[n].classList.add("slider__button--active");
};

const readyActiveSlide = (ind) => {
  activeSlide(ind);
  activeDots(ind);
};

const nextSlide = () => {
  if (index == slides.length - 1) {
    index = 0;
    readyActiveSlide(index);
  } else {
    index++;
    readyActiveSlide(index);
  }
};

const prevSlide = () => {
  if (index == 0) {
    index = slides.length - 1;
    readyActiveSlide(index);
  } else {
    index--;
    readyActiveSlide(index);
  }
};

dots.forEach((item, indexDot) => {
  item.addEventListener('click', () => {
    index = indexDot;
    readyActiveSlide(index);
    // clearInterval(automaticDisplaySlides);
  })
});


buttonNext.addEventListener("click", nextSlide);
buttonPrev.addEventListener("click", prevSlide);


// const automaticDisplaySlides = setInterval(nextSlide, 5000);

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.container {
  margin: 0 auto;
  padding: 0 20px;
  min-width: 320px;
  height: 100%;
}

@media (min-width: 960px) {
  .container {
    padding: 0 10px;
    max-width: 960px;
  }
}

.slider {
  position: relative;
}

.slider__list {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  padding-top: 41px;
  height: 100%;
}

@media (min-width: 960px) {
  .slider__list {
    padding-top: 185px;
  }
}

.slider__item {
  display: none;
  width: 100%;
  height: 100%;
  text-align: center;
}

.slider__item--active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slider__prev {
  display: none;
}

@media (min-width: 960px) {
  .slider__prev {
    position: absolute;
    top: 50%;
    display: block;
    width: 22px;
    height: 41px;
    cursor: pointer;
    padding: 0;
    outline: none;
    border: none;
  }
}

.slider__next {
  display: none;
}

@media (min-width: 960px) {
  .slider__next {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 22px;
    height: 41px;
    cursor: pointer;
    padding: 0;
    outline: none;
    border: none;
  }
}

.slider__toggles {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 44px;
  padding-left: 15px;
}

.slider__toggle {
  margin-right: 17px;
}

.slider__button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  outline: 0;
  cursor: pointer;
  background-color: rgba(0, 0, 0, .3);
  border-radius: 50%;
  transition: .3s linear;
  border: 2px solid transparent;
}

.slider__button--active {
  width: 7px;
  height: 7px;
  padding: 4px;
  border: 2px solid #000;
  background-color: #fff;
}

@media (min-width: 660px) {
  .slider__button--active {
    padding: 3px;
    border: 2px solid #000;
  }
}


}
.rewievs__text {
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 30px;
  text-align: center;
  margin-bottom: 26px;
}
@media (min-width: 960px) {
  .rewievs__text {
    padding: 0 125px;
    margin-bottom: 36px;
  }
}
@media (min-width: 660px) {
  .rewievs__text {
    order: -1;
    font-size: 18px;
    margin-bottom: 35px;
  }
}
.rewievs__name {
  order: -1;
  font-family: "Open Sans";
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  line-height: 30px;
  margin-bottom: 14px;
}
@media (min-width: 660px) {
  .rewievs__name {
    font-size: 20px;
    margin-bottom: 9px;
  }
}
@media (min-width: 960px) {
  .rewievs__name {
    font-size: 24px;
  }
}
.rewievs__about {
  display: none;
}
@media (min-width: 660px) {
  .rewievs__about {
    display: block;
    font-family: "Open Sans";
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 33px;
  }
}
@media (min-width: 960px) {
  .rewievs__about {
    font-size: 18px;
    margin-bottom: 50px;
  }
}

<section class="section rewievs">
  <div class="container slider">
    <ul class="rewievs__list slider__list">
      <li class="rewievs__item slider__item slider__item--active">
        <p class="rewievs__text">«Это приложение перевернуло мой мир и позволило по-новому взглянуть на привычные серые вещи! А еще я познакомился со своей будущей женой в комментариях к выложенной фотографии!»
        </p>
        <div class="rewievs__name">Николай Петров</div>
        <div class="rewievs__about">25 лет, водитель трамвая</div>
      </li>
      <li class="rewievs__item slider__item">
        <p class="rewievs__text">Это приложение изменило мою жизнь! Сначала жена переписывалась там с кем-то в коментариях, потом вообще подала на развод и вышла за него замуж....»</p>
        <div class="rewievs__name">Сергей Иванов</div>
        <div class="rewievs__about">35 лет, старший водитель трамвая</div>
      </li>
      <li class="rewievs__item slider__item">
        <p class="rewievs__text">«Куда тут тыкать то? Сидел 5 часов тыкал в экран, так и не понял»</p>
        <div class="rewievs__name">Иван Николаев</div>
        <div class="rewievs__about">86 лет, уверенный пользователь ПК</div>
      </li>
      <button class="slider__prev" type="button" aria-label="Предыдущий слайд"></button>
      <button class="slider__next" type="button" aria-label="Следующий слайд"></button>
    </ul>
    <ul class="rewievs__toggles slider__toggles">
      <li class="slider__toggle">
        <button class="slider__button slider__button--active" type="button" aria-label="Кнопки переключения слайда"></button>
      </li>
      <li class="slider__toggle">
        <button class="slider__button" type="button" aria-label="Кнопки переключения слайда"></button>
      </li>
      <li class="slider__toggle">
        <button class="slider__button" type="button" aria-label="Кнопки переключения слайда"></button>
      </li>
    </ul>
  </div>
</section>

БЛОГ НА HUSL

Как реализовать, что бы слайды в слайдере не дергались и не прыгали?

Ответы (0 шт):