For a project, I am attempting to recreate the layout of a website similar to Netflix. In Netflix, each category displays videos in a horizontal row, with most of the videos located off-screen and requiring users to click an arrow button to scroll through the content.
I tried replicating this by using Bootstrap Cards as placeholders for the videos and utilizing flexbox to distribute the cards horizontally. I also considered implementing a carousel feature but have not found a suitable solution yet.
Does anyone have suggestions on how to achieve this without relying on JavaScript?
Thank you.
body {
margin: 0;
padding: 0;
}
.contain {
display: flex;
}
.card {
width: 200px;
margin: 5px;
margin-top: 5px;
border-radius: 0;
position: relative;
top: 5px;
left: 5px;
}
.card-img-top {
border-radius: 0;
}
.card-body {
height: 100px;
font-size: 50%;
text-align: center;
}
.list-group-item {
font-size: 50%;
border-radius: 0;
}<div class="contain">
<div class="card" >
<img src="https://farm6.staticflickr.com/5089/5342837785_b579b38145_o.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
</ul>
</div>
...Repeat the above code snippet for additional cards...
</div>