Я делаю простой слайдер для своего веб-сайта (анимация CSS Translate от 0 на -10000PX).
имеет HTML, как это (это DIV 1-20, а другое время 1-20 для петли):
// До того, как я делал это с js (та же проблема возникала). Веб -сайт:/?
< /code>
Вот мой css:
изображения: 250x150 px каждый. < /p>
.main-container{
background-color: white;
width: 100%;
height: 600px;
display: flex;
flex-direction: column;
align-items: center;
padding: 100px;
overflow: hidden;
#truste-me-slider{
width: 10000px;
height: 300px;
overflow: hidden;
display: flex;
flex-direction: row;
flex-wrap: wrap;
overflow: hidden;
animation: 16s trusted-me-slider-animation infinite linear;
}
.trusted-item{
width: 250px;
height: 150px;
display: flex;
flex-direction: column;
float: left;
}
@keyframes trusted-me-slider-animation{
0%{
transform: translateX(0px);
}
100%{
transform: translate(-5000px);
}
}
Подробнее здесь: https://stackoverflow.com/questions/796 ... on-website
