<div class="container">
CSS SCROLL SNAP SLIDER - Haz scroll para probarlo!
<div class="items">
<div class="item">ITEM #1</div>
<div class="item">ITEM #2</div>
<div class="item">ITEM #3</div>
<div class="item">ITEM #4</div>
<div class="item">ITEM #5</div>
<div class="item">ITEM #6</div>
</div>
</div>
.container {
width: 100%;
max-width: 512px;
text-align: center;
}
.items {
width: 100%;
scroll-snap-type: x mandatory;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
flex: none;
overflow: auto;
}
.item {
width: 118px;
height: 118px;
display: inline-block;
flex: none;
scroll-snap-align: start;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: Arial;
font-weight: bold;
letter-spacing: 1.5px;
border-radius: 8px;
margin-right: 10px;
}
.item:nth-child(odd) {
background-color: red;
}
.item:nth-child(even) {
background-color: blue;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.