shahzad hussain samejo software Eng.: Custom Slider

Custom Slider
-------------------------------

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.container{
width:800px;
margin:0px auto;
border:1px solid red;
}
.container ul {
margin:0px;
padding:0px;
list-style-type:none;
}
.container ul li {
list-style-type:none;
}
.container ul li{
display:none;

}

</style>
</head>
<body>

<div class="container">

<ul>
<li id="img1" style="display:block;">
<img class="w3-animate-top" src="image/img_01.jpg">
<a href="#" id="btn1">previous</a>
<a href="#" id="btn2">next</a>
</li>
<li id="img2">
<img class="w3-animate-zoom" src="image/img_02.jpg">
<a href="#" id="btn3">previous</a>
<a href="#" id="btn4">next</a>
</li>
<li id="img3">
<img class="w3-animate-left" src="image/img_03.jpg">
<a href="#" id="btn5">previous</a>
<a href="#" id="btn6">next</a>
</li>
<li id="img4">
<img class="w3-animate-right" src="image/img_04.jpg">
<a href="#" id="btn7">previous</a>
<a href="#" id="btn8">next</a>
</li>
</ul>

</div>

<script>
$(document).ready(function(){

$("#btn1").click(function(){
$("#img1").fadeOut()
$("#img2").fadeIn()
});

$("#btn3").click(function(){
$("#img2").fadeOut()
$("#img3").fadeIn()
});

$("#btn5").click(function(){
$("#img3").fadeOut()
$("#img4").fadeIn()
});

$("#btn7").click(function(){
$("#img4").fadeOut()
$("#img1").fadeIn()
});


$("#btn2").click(function(){
$("#img1").fadeOut()
$("#img4").fadeIn()
});

$("#btn4").click(function(){
$("#img2").fadeOut()
$("#img1").fadeIn()
});

$("#btn6").click(function(){
$("#img3").fadeOut()
$("#img2").fadeIn()
});

$("#btn8").click(function(){
$("#img4").fadeOut()
$("#img3").fadeIn()
});

});
</script>

</body>
</html>

shahzad_samejo@yahoo.com

shahzad hussain samejo software Eng.

Thursday, September 1, 2016

Custom Slider

No comments:

Post a Comment