Live
<div class="container"> <ul class="slider"> <li class="item"><a href="#"></a></li> <li class="item"><a href="#"></a></li> <li class="item"><a href="#"></a></li> <li class="item"><a href="#"></a></li> <li class="item"><a href="#"></a></li> <li class="item"><a href="#"></a></li> <li class="item"><a href="#"></a></li> <li class="item"><a href="#"></a></li> <li class="item"><a href="#"></a></li> <li class="item"><a href="#"></a></li> <li class="item"><a href="#"></a></li> <li class="item"><a href="#"></a></li> <li class="item"><a href="#"></a></li> <li class="item"><a href="#"></a></li> <li class="item"><a href="#"></a></li> <li class="item"><a href="#"></a></li> <li class="item"><a href="#"></a></li> <li class="item"><a href="#"></a></li> </ul> <div class="controls"> <button class="prev">Prev</button> <div class="progress-bar"></div> <button class="next">Next</button> </div></div>
Live
x
body { margin: 0; padding: 0; display: flex; height: 100vh; align-items: center;}.container { overflow: hidden; width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}.slider { display: flex; flex: 1 1 500px; list-style: none; padding: 0; margin: 0 10px;}.item { flex: 0 0 150px; height: 215px; margin-left: 10px; border-radius: 5px; display: flex; flex-direction: column; $numBoxes: 20; $step: 360 / $numBoxes; &:first-child { margin-left: 0; } @for $i from 1 through $numBoxes { &:nth-child(#{$i}) { background: hsla($i * $step, 90%, 60%, 1); z-index: $numBoxes - $i + 1; } } a { flex: 1; }}.controls { margin-top: 20px; flex: 1 1 100%; display: flex; justify-content: center; align-items: center; button { border: none; border-radius: 25px; background: hsla(0, 90%, 65%, 1); padding: 12px 15px; color: white; font-size: 18px; font-weight: bold; line-height: 18px; appearance: none; cursor: pointer; }}.progress-bar { flex: 0 0 200px; height: 4px; border-radius: 4px; margin: 0 20px; background: hsla(0, 90%, 65%, 1); transform: scaleX(0); transform-origin: 0% 50%;}
External CSS
This Pen doesn't use any external CSS resources.