Download FREE API for Word, Excel and PDF in ASP.Net:
Download
Hi fliptoyin23,
What slider you want to implement?
Image slider or range slider?
Please explain in details.
Hi fliptoyin23,
Check this example. Now please take its reference and correct your code.
HTML
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
font-size: 10pt;
}
.dvSlides {
display: none;
}
img {
vertical-align: middle;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="dvSlides fade">
<div class="numbertext">1 / 3</div>
<img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" style="width:100%; height:200px;">
<div class="text">Image 1</div>
</div>
<div class="dvSlides fade">
<div class="numbertext">2 / 3</div>
<img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" style="width:100%; height:200px;">
<div class="text">Image 2</div>
</div>
<div class="dvSlides fade">
<div class="numbertext">3 / 3</div>
<img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" style="width:100%; height:200px;">
<div class="text">Image 3</div>
</div>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("dvSlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000);
}
</script>
</body>
</html>
Demo