Author: | alexerlandsson |
---|---|
Views Total: | 19,945 views |
Official Page: | Go to website |
Last Update: | April 4, 2016 |
License: | MIT |
Preview:

Description:
A pure HTML/CSS/CSS3 responsive fullscreen slideshow that allows to fade though a group of background images.
How to use it:
Add your images as backgrounds to the slideshow.
<div class="container"> <div data-am-gallery> <!-- Radio --> <input type="radio" name="gallery" id="img-1" checked /> <input type="radio" name="gallery" id="img-2" /> <input type="radio" name="gallery" id="img-3" /> <!-- Images --> <div class="images"> <div class="image" style="background-image: url(1.jpg);"></div> <div class="image" style="background-image: url(2.jpg);"></div> <div class="image" style="background-image: url(3.jpg);"></div> </div> <!-- Navigation --> <div class="navigation"> <label class="dot" for="img-1"></label> <label class="dot" for="img-2"></label> <label class="dot" for="img-3"></label> </div> </div> </div>
The core CSS/CSS3 styles for the slideshow.
[data-am-gallery] { position: relative; width: 100%; height: 100%; background-color: #fff; /* Navigation */ } [data-am-gallery] input[type="radio"] { position: fixed; top: -9999px; } [data-am-gallery] input[type="radio"]:checked:nth-child(5) ~ .images .image:nth-child(5) { opacity: 1; } [data-am-gallery] input[type="radio"]:checked:nth-child(5) ~ .navigation .dot:nth-child(5) { background-color: #29acbb; } [data-am-gallery] input[type="radio"]:checked:nth-child(5) ~ .navigation .dot:nth-child(5):hover { opacity: 1; } [data-am-gallery] input[type="radio"]:checked:nth-child(4) ~ .images .image:nth-child(4) { opacity: 1; } [data-am-gallery] input[type="radio"]:checked:nth-child(4) ~ .navigation .dot:nth-child(4) { background-color: #29acbb; } [data-am-gallery] input[type="radio"]:checked:nth-child(4) ~ .navigation .dot:nth-child(4):hover { opacity: 1; } [data-am-gallery] input[type="radio"]:checked:nth-child(3) ~ .images .image:nth-child(3) { opacity: 1; } [data-am-gallery] input[type="radio"]:checked:nth-child(3) ~ .navigation .dot:nth-child(3) { background-color: #29acbb; } [data-am-gallery] input[type="radio"]:checked:nth-child(3) ~ .navigation .dot:nth-child(3):hover { opacity: 1; } [data-am-gallery] input[type="radio"]:checked:nth-child(2) ~ .images .image:nth-child(2) { opacity: 1; } [data-am-gallery] input[type="radio"]:checked:nth-child(2) ~ .navigation .dot:nth-child(2) { background-color: #29acbb; } [data-am-gallery] input[type="radio"]:checked:nth-child(2) ~ .navigation .dot:nth-child(2):hover { opacity: 1; } [data-am-gallery] input[type="radio"]:checked:nth-child(1) ~ .images .image:nth-child(1) { opacity: 1; } [data-am-gallery] input[type="radio"]:checked:nth-child(1) ~ .navigation .dot:nth-child(1) { background-color: #29acbb; } [data-am-gallery] input[type="radio"]:checked:nth-child(1) ~ .navigation .dot:nth-child(1):hover { opacity: 1; } [data-am-gallery] .image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; -webkit-transition: opacity 400ms ease; transition: opacity 400ms ease; background-size: cover; background-position: center; background-repeat: no-repeat; } [data-am-gallery] .navigation { position: absolute; bottom: 15px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } [data-am-gallery] .dot { display: inline-block; width: 15px; height: 15px; margin: 0 2px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.8); cursor: pointer; -webkit-transition: opacity 200ms ease; transition: opacity 200ms ease; } [data-am-gallery] .dot:hover { opacity: 0.8; }
Make the slideshow fullscreen.
body { margin: 0; } .container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); }
Simplifying this a bit, you put the each input before the corresponding dev, then change the css to:
[data-am-gallery] input[type=”radio”]:checked + div.image { opacity:1; }
This will allow an arbitrary number of slides without extending the css, and tidies the css up nicely.