Author: | skadavakolanu |
---|---|
Views Total: | 5,672 views |
Official Page: | Go to website |
Last Update: | October 24, 2016 |
License: | MIT |
Preview:

Description:
CSS Carousal is a pure HTML/CSS slideshow which is animated without using Javascript. It uses radio buttons and labels to trigger the slideshow.
How to use it:
Create a list of images for the carousel.
<ul> <li class="slide1"> <img src="1.jpg"> <h2>Image 1</h2> </li> <li class="slide1"> <img src="2.jpeg"> <h2>Image 2</h2> </li> <li class="slide1"> <img src="3.jpg"> <h2>Image 3</h2> </li> ... </ul>
Create radio inputs and labels which will be used to switch between images. The whole markup structure should be like this:
<ul> <input type="radio" name="slider" id="1" class="slider" checked> <input type="radio" name="slider" id="2" class="slider"> <input type="radio" name="slider" id="3" class="slider"> <li class="slide1"> <img src="1.jpg"> <h2>Image 1</h2> </li> <li class="slide1"> <img src="2.jpeg"> <h2>Image 2</h2> </li> <li class="slide1"> <img src="3.jpg"> <h2>Image 3</h2> </li> </ul> <div class="selector"> <label for="1"></label> <label for="2"></label> <label for="3"></label> </div>
The main CSS styles.
.slider:nth-of-type(1):checked ~ .slide1:nth-of-type(1), .slider:nth-of-type(2):checked ~ .slide1:nth-of-type(2), .slider:nth-of-type(3):checked ~ .slide1:nth-of-type(3), .slider:nth-of-type(4):checked ~ .slide1:nth-of-type(4), .slider:nth-of-type(5):checked ~ .slide1:nth-of-type(5), .slider:nth-of-type(6):checked ~ .slide1:nth-of-type(6) { display: inline-block; } input[type=radio] { display: none; } ul { text-align: center; } li { border: 3px solid #333; list-style: none; display: none; } img { width: 800px; height: 600px; position: relative; } h2 { position: absolute; top: 250px; color: #fff; padding: 20px; background-color: #000; } p { font-size: x-large; padding-left: 15%; } label { background: black; padding: 10px; border-radius: 50%; display: inline-block; } .selector { text-align: center; }