Image slideshow

Responsive image slideshow with CSS and JavaScript

by TrickyUI

HTML

<div class="slideshow">
	<div class="slide"><img src="https://lh3.google.com/u/0/d/1vJ5zbw7jD7sd51ASmRvMQQdPR8mkw211=w1920-h943-iv1"></div>
	<div class="slide"><img src="https://lh3.google.com/u/0/d/1XNHVDOCYkQq9JzaXVNOnXX4gwOUn3n6V=w1920-h943-iv1"></div>
	<div class="slide"><img src="https://lh3.google.com/u/0/d/1zcyF_6st9cyZldY-Pp28TzUNFFSJk2dY=w1920-h606-iv1"></div>
	<div class="slide"><img src="https://lh3.google.com/u/0/d/15-d_F16qnT66p2Lz9KlI9UuSL-SCAhsJ=w1920-h606-iv1"></div>
	<a class="prev" id="prev">&#10094;</a>
  <a class="next" id="next">&#10095;</a>
</div>

CSS

.slideshow {
	position: relative;
    margin:100px auto;
    width: 700px;
}
.slide {display: none;}
.next, .prev {
	cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    background-color: rgba(0, 0, 0, 0.3);
}
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

JavaScript

document.getElementById("prev").addEventListener("click", function(){
    slider(-1);
});
document.getElementById("next").addEventListener("click", function(){
    slider(1);
});
var slideIndex = 1;
showSlides(slideIndex);

function slider(n) {
	showSlides(slideIndex += n);
}

function showSlides(n) {
	var i;
	var slides = document.getElementsByClassName("slide");
	if (n > slides.length) {
		slideIndex = 1
	}
	if (n < 1) {
		slideIndex = slides.length
	}
	for (i = 0; i < slides.length; i++) {
		slides[i].style.display = "none";
	}
	slides[slideIndex - 1].style.display = "block";
}