Я пытаюсь создать ползунок карусели с помощью анимации HTML и CSS -ключа. Мне нужна аналогичная скользящая анимация, как на веб-сайте Olymptrade.com/pages/trading/fixed время (см. Раздел «Выберите из 190+ активов»). Я создал аналогичный макет для ссылки и пытаться анимацию, как присвоение ссылки. Но не работает. Так что помогите мне разрешить это. Я прошу, чтобы слайдер был отзывчивым.
css < /p>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f0f2f5;
cursor: none;
}
.slider-container {
width: 1200px;
position: relative;
overflow: hidden;
border: 1px solid red;
padding: 20px;
}
.slider {
display: flex;
position: relative;
border: 1px solid green;
border: 1px solid black;
padding: 10px;
justify-content: center;
}
.slide {
width: 250px;
height: 400px;
margin: 0 10px;
position: relative;
transition: all 0.3s ease-in-out;
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
border: 1px solid orange;
background-color: yellow;
animation-name: slide-in;
animation-duration: 3s;
animation-name: slide-in;
}
.slide:first-child {
opacity: .5;
transform: scale(0.8) translateX(60%);
}
.slide:last-child {
opacity: .5;
transform: scale(0.8) translateX(-60%);
z-index: -1;
}
/* Animation Keyframes */
@keyframes slide-in {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
< /code>
html < /p>
Box 01
>
Box 02
>
Box 03
>
Box 04
>
Box 05
>
< /code>
У меня нет глубоких знаний о кодировании. Может ли это создать этот тип анимации только с помощью ключевых кадров CSS. Если нет, пожалуйста, предложите код jQuery, чтобы разрешить его.
Подробнее здесь: https://stackoverflow.com/questions/795 ... lay-slider
