Swipe.js is one of the most popular JavaScript libraries that allow us to get a responsive slider in our web page.
The following code sample shows how simple it is to use this JavaScript library. It includes 4 images that were prepared in advance.
<!DOCTYPE html>
<html>
<head>
<title>swipe.js demo</title>
<script type="text/javascript" src="swipe.js"></script>
<style>
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
</style>
</head>
<body>
<h2>our simple swipe.js demo</h2>
<div id='ourslider' class='swipe'>
<div class='swipe-wrap'>
<div><img src="pix/pix1.jpg"></div>
<div><img src="pix/pix2.jpg"></div>
<div><img src="pix/pix3.jpg"></div>
<div><img src="pix/pix4.jpg"></div>
<div><img src="pix/pix5.jpg"></div>
</div>
</div>
<script type="text/javascript">
ob = new Swipe(document.getElementById('ourslider'), {
startSlide: 4,
speed: 500,
auto: 3000,
continuous: true
});
</script>
</body>
</html>
The following video clip overviews this code sample, shows its execution and explains it step by step.
You can find more video clips, training material and code samples for learning how to use this library in my free online courses website at http://abelski.lifemichael.com.
