Useful for startup landing pages where you need to display brand partners and other cool logos or whatever.
Enjoy. :)
A Pen by Jack Oliver on CodePen.
Created
August 30, 2022 21:00
-
-
Save jjcatulle/2a9c36189bd262d76bb6842980b529b6 to your computer and use it in GitHub Desktop.
[CSS] Infinite autoplay carousel
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="slider"> | |
| <div class="slide-track"> | |
| <div class="slide"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" /> | |
| </div> | |
| <div class="slide"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" /> | |
| </div> | |
| <div class="slide"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" /> | |
| </div> | |
| <div class="slide"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" /> | |
| </div> | |
| <div class="slide"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" /> | |
| </div> | |
| <div class="slide"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" /> | |
| </div> | |
| <div class="slide"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" /> | |
| </div> | |
| <div class="slide"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" /> | |
| </div> | |
| <div class="slide"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" /> | |
| </div> | |
| <div class="slide"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" /> | |
| </div> | |
| <div class="slide"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" /> | |
| </div> | |
| <div class="slide"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" /> | |
| </div> | |
| <div class="slide"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" /> | |
| </div> | |
| <div class="slide"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" /> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| align-items: center; | |
| background: #E3E3E3; | |
| display: flex; | |
| height: 100vh; | |
| justify-content: center; | |
| } | |
| @mixin white-gradient { | |
| background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); | |
| } | |
| $animationSpeed: 40s; | |
| // Animation | |
| @keyframes scroll { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(calc(-250px * 7))} | |
| } | |
| // Styling | |
| .slider { | |
| background: white; | |
| box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125); | |
| height: 100px; | |
| margin: auto; | |
| overflow:hidden; | |
| position: relative; | |
| width: 960px; | |
| &::before, | |
| &::after { | |
| @include white-gradient; | |
| content: ""; | |
| height: 100px; | |
| position: absolute; | |
| width: 200px; | |
| z-index: 2; | |
| } | |
| &::after { | |
| right: 0; | |
| top: 0; | |
| transform: rotateZ(180deg); | |
| } | |
| &::before { | |
| left: 0; | |
| top: 0; | |
| } | |
| .slide-track { | |
| animation: scroll $animationSpeed linear infinite; | |
| display: flex; | |
| width: calc(250px * 14); | |
| } | |
| .slide { | |
| height: 100px; | |
| width: 250px; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment