How to create your own slide from scratch with javascript. The image slider is responsive for all devices
<!DOCTYPE html>
<html>
<style>
.askiwSlide {
display: none
}
.slider-askiw {
width: 100%;
position: relative;
margin: auto;
}
.askiwSlide img {
width: 100%;
height: 380px;
object-fit: cover;
object-position: 50% 50%;
}
.left, .right {
position: absolute;
top: 50%;
cursor: pointer;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
background-color: rgba(0, 0, 0, 0.3);
}
.right {
right: 0;
border-radius: 5px 0 0 5px;
}
.left:hover, .right:hover {
background-color: rgba(0, 0, 0, 1);
}
.title {
position: absolute;
top: 20px;
color: #FFFFFF;
font-size: 6VW;
padding: 20px;
width: 100%;
text-align: center;
}
.active {
background-color: #717171;
}
/* Animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.3s;
animation-name: fade;
animation-duration: 1.3s;
}
@-webkit-keyframes fade {
from {
opacity: .3;
}
to {
opacity: 1;
}
}
@keyframes fade {
from {
opacity: .3;
}
to {
opacity: 1;
}
}
</style>
<body>
<div class="slider-askiw">
<div class="askiwSlide fade">
<img src="https://askiw.com/wp-content/uploads/2022/07/image1.webp" />
<div class="title">Lorem ipsum 1</div>
</div>
<div class="askiwSlide fade">
<img src="https://askiw.com/wp-content/uploads/2022/07/image2.webp"/>
<div class="title">Lorem ipsum 2</div>
</div>
<div class="askiwSlide fade">
<img src="https://askiw.com/wp-content/uploads/2022/07/image3.webp"/>
<div class="title">Lorem ipsum 3</div>
</div>
<!-- Navigation -->
<span class="left" onclick="nextSlide(-1)">❮</span>
<span class="right" onclick="nextSlide(1)">❯</span>
</div>
<script>
let slideIndex = 1;
displaySlides(slideIndex);
function nextSlide(num) {
displaySlides(slideIndex += num);
}
function currentSlide(num) {
displaySlides(slideIndex = num);
}
function displaySlides(num) {
let i;
let slides = document.getElementsByClassName("askiwSlide");
if (num > slides.length) { slideIndex = 1 }
if (num < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
</script>
</body>
</html>The output of the code above
Lorem ipsum 1
Lorem ipsum 2
Lorem ipsum 3