<p>The tiniest <a href="https://getbutterfly.com/how-to-build-a-vanilla-javascript-slider-in-less-than-100-lines/">Vanilla JavaScript Sliders</a>.</p>
<div class="homepage-hero-slider gallery">
<div class="photos">
<div class="slide block active" style="background: url(https://images.unsplash.com/photo-1532775946639-ebb276eb9a1c?ixlib=rb-0.3.5&s=b821fc70ae641c5af2bfa331ea90f17c&auto=format&fit=crop&w=1500&q=80) no-repeat center center; background-size: cover;"></div>
<div class="slide block" style="background: url(https://images.unsplash.com/photo-1516571137133-1be29e37143a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=615f2f112cda6c65a2511e9952556680&auto=format&fit=crop&w=1506&q=80) no-repeat center center; background-size: cover;"></div>
<div class="slide block" style="background: url(https://images.unsplash.com/photo-1516214104703-d870798883c5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4cd3d445041467403058c0d8356b1f9b&auto=format&fit=crop&w=1500&q=80) no-repeat center center; background-size: cover;"></div>
<div class="slide block" style="background: url(https://images.unsplash.com/photo-1512089425728-b012186ab3cc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0b9c18fd67a45fb33235d78ea2c1cdef&auto=format&fit=crop&w=1500&q=80) no-repeat center center; background-size: cover;"></div>
</div>
<div class="buttons">
<a class="prev" href="#"><i class="fas fa-fw fa-arrow-left"></i></a>
<a class="next" href="#"><i class="fas fa-fw fa-arrow-right"></i></a>
</div>
</div>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CESDK2J7&placement=getbutterflycom" id="_carbonads_js"></script>
.gallery {
width: 100%;
height: 600px;
position: relative;
}
.gallery .photos {
position: relative;
height: 100%;
}
.gallery .block {
height: 100%;
width: 100%;
position: absolute;
left: 0;
opacity: 0;
transition: opacity 1s;
}
.gallery .buttons {
position: absolute;
width: 100%;
top: 258px;
font-size: 24px;
}
.gallery .buttons .prev {
border-radius: 0 3px 3px 0;
float: left;
}
.gallery .buttons .next {
border-radius: 3px 0 0 3px;
float: right;
}
.gallery .buttons a {
z-index: 4;
position: relative;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.25);
text-decoration: none;
display: inline-block;
padding: 24px 16px;
}
.gallery .block.active {
opacity: 1;
}
function supernova_slider() {
let nextBtn = document.querySelector(".gallery .buttons .next"),
prevBtn = document.querySelector(".gallery .buttons .prev"),
slide = document.querySelectorAll(".gallery .photos .block"),
i = 0;
prevBtn.onclick = (event) => {
event.preventDefault();
slide[i].classList.remove("active");
i--;
if (i < 0) {
i = slide.length - 1;
}
slide[i].classList.add("active");
};
nextBtn.onclick = (event) => {
event.preventDefault();
slide[i].classList.remove("active");
i++;
if (i >= slide.length) {
i = 0;
}
slide[i].classList.add("active");
};
slider_callback();
let sliderInterval = window.setInterval(slider_callback, 3000);
function slider_callback() {
nextBtn.click();
}
}
supernova_slider();