Author: | Mauricio31Santos |
---|---|
Views Total: | 14,182 views |
Official Page: | Go to website |
Last Update: | December 30, 2020 |
License: | MIT |
Preview:

Description:
A CSS only responsive slider (carousel) component that infinitely slides through background images by altering the images’ background-position using CSS animations.
How to use it:
1. Add your slides together with the descriptions displayed in the caption bar to the slider container.
<div class="slider"> <div class="slide slide1"> <div class="caption"> <h2>Slide 1</h2> <p>Description 1</p> </div> </div> <div class="slide slide2"> <div class="caption"> <h2>Slide 1</h2> <p>Description 1</p> </div> </div> <div class="slide slide3"> <div class="caption"> <h2>Slide 31</h2> <p>Description 3</p> </div> </div> <div class="slide slide4"> <div class="caption"> <h2>Slide 4</h2> <p>Description 4</p> </div> </div> <div class="slide slide1"> <div class="caption"> <h2>Slide 1</h2> <p>Description 1</p> </div> </div> </div>
2. The basic styles for the slider.
.slider { position: absolute; top: 0; left: 0; width: 500%; height: 100%; animation: animate 10s linear infinite; } .slider .slide { position: relative; width: 20%; height: 100%; float: left; } .slider .slide .caption { position: absolute; bottom: 60px; left: 60px; right: 60px; padding: 30px; background: rgba(0, 0, 0, .5); box-sizing: border-box; transition: 0.5s; } .slider .slide .caption h2 { margin: 0 0 20; padding: 0; color: #fff; font-size: 48px; transition: 0.5s; } .slider .slide .caption p { margin: 0; padding: 0; color: #fff; font-size: 20px; transition: 0.5s; } @media (max-width: 768px) { .slider .slide .caption { position: absolute; bottom: 20px; left: 20px; right: 20px; padding: 20px; } .slider .slide .caption h2 { margin: 0 0 10; font-size: 30px; } .slider .slide .caption p { font-size: 16px; } }
3. The CSS3 animations for the slide transitions between background images.
@keyframes animate { 0% { left: 0; } 20% { left: 0; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } }
4. Add your own background images to the slides.
.container .slider .slide.slide1 { background: url(1.jpg); background-size: cover; background-position: center; } .container .slider .slide.slide2 { background: url(2.jpg); background-size: cover; background-position: center; } .container .slider .slide.slide3 { background: url(3.jpg); background-size: cover; background-position: center; } .container .slider .slide.slide4 { background: url(4.jpg); background-size: cover; background-position: center; }
It looks to be a pretty good effort. And useful, too. Thanks for sharing.