Author: | mannoeu |
---|---|
Views Total: | 443 views |
Official Page: | Go to website |
Last Update: | June 16, 2020 |
License: | MIT |
Preview:

Description:
slider-show is a responsive, mobile-compatible, fullscreen image slideshow written in pure JavaScript and CSS/CSS3.
It provides an Autoplay control which allows you to play/pause/resume the automatic cross-fading animation.
You can also manually switch between those images by clicking/tapping the pre/next buttons displayed in the bottom control bar.
How to use it:
1. Add images to the slideshow.
<div id="slider"> <img class="selected" src="1.jpg" alt="Alt 1" /> <img src="2.jpg" alt="Alt 2" /> <img src="3.jpg" alt="Alt 3" /> <img src="4.jpg" alt="Alt 4" /> <img src="5.jpg" alt="Alt 5" /> </div>
2. Add controls to the slideshow.
<div class="controls"> <button id="prev">Prev</button> <button id="stop">Pause</button> <button id="next">Next</button> </div>
3. The necessary CSS styles for the slideshow & controls.
#slider { width: 100%; height: 100vh; max-height: 100%; position: relative; } #slider img { opacity: 0; position: absolute; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s linear; } #slider img.selected { opacity: 1; } .controls { position: absolute; background: rgba(0, 0, 0, 0.3); bottom: 0px; width: 100%; height: 30px; padding: 40px 20px; display: flex; justify-content: space-between; align-items: center; } .controls button { display: block; border: 1px solid rgb(185, 185, 185); background: transparent; background-size: 200%; padding: 10px 30px; min-width: 110px; color: rgb(185, 185, 185); font-weight: bold; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; cursor: pointer; transition: 0.2s all linear; -webkit-tap-highlight-color: transparent; } .controls button:hover { color: #fff; border-color: #fff; } @media (max-width: 600px) { .controls button { font-size: 10px; width: 70px; } .controls { padding: 50px 10px; } }
3. Download and insert the main JavaScript into the document. Done.
<script src="js/script.js"></script>