Плавное переключение между div-ми

Question

Подскажите пожалуйста, как сделать плавную смену div-ов при нажатии на кнопки (prev/next) и при клике на переключатели (link)? При том, чтобы при нажатии на кнопки плавно менялся не только content-item, но и active переключался :)

.links {
  background: orange;
  width: max-content;
  display: flex;
  margin-top: 20px;
  padding: 10px 20px 10px 0;
}

.links .link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
  margin-left: 20px;
  cursor: pointer;
}

.links .link:hover {
  background: yellow;
}

.links .active {
  background: white;
}

.content {
  display: flex;
  background: #DD4B39;
  color: #FFFFFF;
  margin-top: 50px;
}

.content .content-item {
  display: flex;
  width: 100%;
  height: 100%;
  background: #50b154;
  margin: 10px;
}

<button>Prev</button>
<button>Next</button>

<div class="links">
  <div class="link active">1</div>
  <div class="link">2</div>
  <div class="link">3</div>
</div>

<div class="content">
  <div class="content-item">
    <div>Контент внутри1</div>
    <p>Описание1</p>
  </div>
  <div class="content-item" style="display: none";>
    <div>Контент внутри2</div>
    <p>Описание2</p>
  </div>
  <div class="content-item" style="display: none";>
    <div>Контент внутри3</div>
    <p>Описание3</p>
  </div>
  <div class="content-item" style="display: none";>
    <div>Контент внутри4</div>
    <p>Описание4</p>
  </div>
</div>

БЛОГ НА HUSL

Плавное переключение между div-ми

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