Author: | Bryanauta |
---|---|
Views Total: | 155 views |
Official Page: | Go to website |
Last Update: | June 30, 2021 |
License: | MIT |
Preview:

Description:
A minimal, responsive background slider/slideshow written in vanilla JavaScript.
How to use it:
1. Load the core stylesheet and font awesome iconic font in the document.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="style.css" />
2. Add background images to the slides and then wrap them together with the controls to the slider container.
<div class="slider-container"> <div class="slide active" style="background-image: url('https://images.unsplash.com/photo-1613109526778-27605f1f27d2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80');"> </div> <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1588392382834-a891154bca4d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80');"> </div> <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80');"> </div> <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1431794062232-2a99a5431c6c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80');"> </div> <div class="slide" style="background-image: url('https://images.unsplash.com/photo-1470770903676-69b98201ea1c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80');"> </div> <button class="arrow left-arrow" id="left"> <i class="fas fa-arrow-left"></i> </button> <button class="arrow right-arrow" id="right"> <i class="fas fa-arrow-right"></i> </button> </div>
3. Load the main script script.js
at the end of the document. That’s it.
<script src="script.js"></script>