Как сделать слайдер с движением по кругу и анимацией перехода?

Question

Как сделать такой слайдер? Пробовал в слик, но если добавлять margin-top активному слайду, то анимация пропадает

Answer 1

Вот вам, Максим, держите самый простой слайдер с движением по кругу и анимацией перехода на чистом CSS.

body {
  overflow: hidden;
  display: flex;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  background: rgb(255, 255, 255);
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(238, 201, 3, 1) 100%, rgba(238, 201, 3, 1) 100%);
}

#slider {
  position: absolute;
  top: 50%;
  bottom: 0;
  margin-top: -125px;
  width: 800px;
  height: 250px;
}

.slider {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
  border-radius: 100%;
}

#item__1 {
  width: 50px;
  height: 50px;
  left: 0;
  background: url("https://aguru.pro/www-images/user/2/2136/2018/09/06/5b90a12f0dede.PNG");
  background-size: cover;
  animation: item__1 5s linear infinite;
}

#item__2 {
  width: 250px;
  height: 250px;
  left: 275px;
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Presidential_%241_Reverse.png/250px-Presidential_%241_Reverse.png");
  background-size: cover;
  animation: item__2 5s linear infinite;
}

#item__3 {
  width: 50px;
  height: 50px;
  left: 750px;
  background: url("https://aguru.pro/www-images/user/2/2035/2018/05/22/5b0425dcc8ef6.PNG");
  background-size: cover;
  animation: item__3 5s linear infinite;
}

@keyframes item__1 {
  0% {
    left: 0px;
    width: 50px;
    height: 50px;
    transform: rotate(0deg);
    z-index: 0;
  }
  16.67% {
    left: 0px;
    width: 50px;
    height: 50px;
    z-index: 0;
  }
  33.33% {
    left: 750px;
    width: 50px;
    height: 50px;
    z-index: 1;
  }
  49.98% {
    left: 750px;
    width: 50px;
    height: 50px;
    transform: rotate(00deg);
    z-index: 1;
  }
  66.64% {
    left: 275px;
    width: 250px;
    height: 250px;
    transform: rotate(360deg);
    z-index: 2;
  }
  83.3% {
    left: 275px;
    width: 250px;
    height: 250px;
    transform: rotate(360deg);
    z-index: 2;
  }
  100% {
    left: 0px;
    width: 50px;
    height: 50px;
    transform: rotate(0deg);
    z-index: 0;
  }
}

@keyframes item__2 {
  0% {
    left: 275px;
    width: 250px;
    height: 250px;
    transform: rotate(0deg);
    z-index: 2;
  }
  16.67% {
    left: 275px;
    width: 250px;
    height: 250px;
    transform: rotate(0deg);
    z-index: 2;
  }
  33.33% {
    left: 0px;
    width: 50px;
    height: 50px;
    transform: rotate(360deg);
    z-index: 0;
  }
  49.98% {
    left: 0px;
    width: 50px;
    height: 50px;
    z-index: 0;
  }
  66.64% {
    left: 750px;
    width: 50px;
    height: 50px;
    z-index: 1;
  }
  83.3% {
    left: 750px;
    width: 50px;
    height: 50px;
    transform: rotate(360deg);
    z-index: 1;
  }
  100% {
    left: 275px;
    width: 250px;
    height: 250px;
    transform: rotate(0deg);
    z-index: 2;
  }
}

@keyframes item__3 {
  0% {
    left: 750px;
    width: 50px;
    height: 50px;
    z-index: 1;
  }
  16.67% {
    left: 750px;
    width: 50px;
    height: 50px;
    transform: rotate(0deg);
    z-index: 1;
  }
  33.33% {
    left: 275px;
    width: 250px;
    height: 250px;
    transform: rotate(360deg);
    z-index: 2;
  }
  49.98% {
    left: 275px;
    width: 250px;
    height: 250px;
    transform: rotate(360deg);
    z-index: 2;
  }
  66.64% {
    left: 0px;
    width: 50px;
    height: 50px;
    transform: rotate(0deg);
    z-index: 0;
  }
  83.3% {
    left: 0px;
    width: 50px;
    height: 50px;
    z-index: 0;
  }
  100% {
    left: 750px;
    width: 50px;
    height: 50px;
    z-index: 1;
  }
}

<div id="slider">
  <div id="item__1" class="slider"></div>
  <div id="item__2" class="slider"></div>
  <div id="item__3" class="slider"></div>
</div>

БЛОГ НА HUSL

Как сделать слайдер с движением по кругу и анимацией перехода?

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