Author: | Fehrenbach Baptiste |
---|---|
Views Total: | 1,619 views |
Official Page: | Go to website |
Last Update: | November 29, 2022 |
License: | MIT |
Preview:

Description:
A simple infinitely looping carousel built on top of plain HTML and CSS/CSS3.
How to use it:
1. Wrap your carousel items into label
elements as follows:
<div class="myCarousel"> <label class="item" for="t-1"> <img src="1.jpg" alt="picture"> Carousel Item 1 </label> <label class="item" for="t-2"> <img src="2.jpg" alt="picture"> Carousel Item 2 </label> <label class="item" for="t-3"> <img src="3.jpg" alt="picture"> Carousel Item 3 </label> ... </div>
2. Create a group of radio buttons to switch between those carousel items.
<input type="radio" name="carousel" id="t-1"> <input type="radio" name="carousel" id="t-2"> <input type="radio" name="carousel" id="t-3" checked> ...
3. Add a pagination control to the bottom of the carousel. The full HTML structure should be like these:
<div class="slider"> <input type="radio" name="carousel" id="t-1"> <input type="radio" name="carousel" id="t-2"> <input type="radio" name="carousel" id="t-3" checked> <input type="radio" name="carousel" id="t-4"> <input type="radio" name="carousel" id="t-5"> <div class="myCarousel"> <label class="item" for="t-1"> <img src="1.jpg" alt="picture"> Carousel Item 1 </label> <label class="item" for="t-2"> <img src="2.jpg" alt="picture"> Carousel Item 2 </label> <label class="item" for="t-3"> <img src="3.jpg" alt="picture"> Carousel Item 3 </label> <label class="item" for="t-4"> <img src="4.jpg" alt="picture"> Carousel Item 4 </label> <label class="item" for="t-5"> <img src="5.jpg" alt="picture"> Carousel Item 5 </label> </div> <div class="dots"> <label for="t-1"></label> <label for="t-2"></label> <label for="t-3"></label> <label for="t-4"></label> <label for="t-5"></label> </div> </div>
4. The core CSS styles for the carousel.
.slider { width: 100%; } .slider input { display: none; } .myCarousel { display: flex; align-items: center; justify-content: center; position: relative; min-height: 350px; perspective: 1000px; overflow: hidden; } .myCarousel .item { width: 450px; padding: 30px; border-radius: 5px; background-color: #0A0220; position: absolute; top: 0; box-sizing: border-box; text-align: center; transition: transform 0.4s; box-shadow: 0 0 10px rgba(0,0,0,0.3); user-select: none; cursor: pointer; } .myCarousel .item img { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; border: 13px solid #3B344D; } .dots { display: flex; justify-content: center; align-items: center; } .dots label { height: 5px; width: 5px; border-radius: 50%; cursor: pointer; background-color: #413B52; margin: 7px; transition-duration: 0.2s; }
5. Activate the carousel using the radio button CSS hacks.
#t-1:checked ~ .dots label[for="t-1"], #t-2:checked ~ .dots label[for="t-2"], #t-3:checked ~ .dots label[for="t-3"], #t-4:checked ~ .dots label[for="t-4"], #t-5:checked ~ .dots label[for="t-5"] { transform: scale(2); background-color: #fff; } #t-1:checked ~ .dots label[for="t-2"], #t-2:checked ~ .dots label[for="t-1"], #t-2:checked ~ .dots label[for="t-3"], #t-3:checked ~ .dots label[for="t-2"], #t-3:checked ~ .dots label[for="t-4"], #t-4:checked ~ .dots label[for="t-3"], #t-4:checked ~ .dots label[for="t-5"], #t-5:checked ~ .dots label[for="t-4"] { transform: scale(1.5); } #t-1:checked ~ .myCarousel label[for="t-3"], #t-2:checked ~ .myCarousel label[for="t-4"], #t-3:checked ~ .myCarousel label[for="t-5"], #t-4:checked ~ .myCarousel label[for="t-1"], #t-5:checked ~ .myCarousel label[for="t-2"] { transform: translate3d(600px, 0, -180px) rotateY(-25deg); z-index: 2; } #t-1:checked ~ .myCarousel label[for="t-2"], #t-2:checked ~ .myCarousel label[for="t-3"], #t-3:checked ~ .myCarousel label[for="t-4"], #t-4:checked ~ .myCarousel label[for="t-5"], #t-5:checked ~ .myCarousel label[for="t-1"] { transform: translate3d(300px, 0, -90px) rotateY(-15deg); z-index: 3; } #t-2:checked ~ .myCarousel label[for="t-1"], #t-3:checked ~ .myCarousel label[for="t-2"], #t-4:checked ~ .myCarousel label[for="t-3"], #t-5:checked ~ .myCarousel label[for="t-4"], #t-1:checked ~ .myCarousel label[for="t-5"] { transform: translate3d(-300px, 0, -90px) rotateY(15deg); z-index: 3; } #t-3:checked ~ .myCarousel label[for="t-1"], #t-4:checked ~ .myCarousel label[for="t-2"], #t-5:checked ~ .myCarousel label[for="t-3"], #t-2:checked ~ .myCarousel label[for="t-5"], #t-1:checked ~ .myCarousel label[for="t-4"] { transform: translate3d(-600px, 0, -180px) rotateY(25deg); } #t-1:checked ~ .myCarousel label[for="t-1"], #t-2:checked ~ .myCarousel label[for="t-2"], #t-3:checked ~ .myCarousel label[for="t-3"], #t-4:checked ~ .myCarousel label[for="t-4"], #t-5:checked ~ .myCarousel label[for="t-4"], #t-5:checked ~ .myCarousel label[for="t-5"] { z-index: 4; }