Как реализовать следующий ряд карточек?
ссылался на следующую ссылку, но на нее нет ответов Как создатьгоризонтальный прокручиваемый список html-карт, таких как результаты поиска chrome на мобильных устройствах?
https://benfrain.com/playground/scroller.html слишком сложно.
Вот что у меня так далеко:
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
.cardRow {
display: flex;
width: 100%;
height: 210px;
overflow-x: scroll;
background: #222;
}
.card {
background-color: #ecf0f1;
width: 200px;
/*Not working???*/
height: 200px;
margin-right: 15px;
padding: 5px;
color: #34495e
}
<div class="cardRow">
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
<div class="card">Card Content</div>
</div>
Количество оставшихся карт, отображаемых при наведении курсора на стрелки, необязательно.Просто стрелки, которые управляют прокруткой, в порядке.