Adding a custom slider into a web page or website enhances the look and feel of the website. Hence, below is the code of making a custom slider and using it in your web site.
I am using jQuery and a plugin called SlidesJS. You just have to include the jQuery.js or jQuery.min.js file and jQuery.slides.min.js file which contains the needed styling and features. SlidesJS is a responsive slideshow plug-in for jQuery. You can easily get the js file on GitHub.
Below is the HTML code. I have also added a next and previous button feature.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slider</title>
<link rel="stylesheet" href="css/drag.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.slides.min.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
</head>
<body>
<h3 class="first">Demo Interactive UI's</h3>
<div class="container">
<div id="slides">
<img id="imageSlide" alt="" src="" />
</div>
<button id="prev"></button>
<button id="next"></button>
</div>
</body>
</html>
Now add this js code into a js file. This is code inside drag.js file.
$('#slides').slidesjs({
width: 940,
height: 528,
});
var imgs = ["images/bcg_slide-1.jpg",
"images/river.jpg",
"images/example-slide-3.jpg",
"images/city.jpg"]
var cnt = imgs.length;
setInterval(Slider, 2000);
function Slider() {
$("#imageSlide").show("fast", function() {
$(this).attr("src", imgs[(imgs.length++) % cnt]).show();
});
}
$('#next').on('click', getNext);
$('#prev').on('click', getPrev);
var count = 0;
function getNext() {
count = imgs.length++;
$('#imageSlide').attr("src", imgs[count % cnt]).show();
}
function getPrev() {
count = imgs.length--;
$('#imageSlide').attr("src", imgs[count % cnt]).show();
}
In the above code I have used an array for storing the images. Using a variable cnt and count I am keeping a record of the total no. of images that is used in the next and previous button functions.
I hope this will help you all to create a slider and implement it.
0 Comment(s)