 |
| jQuery fadein and fadeout slider |
See the Pen Custom fadeIn and FadeOut slider with next prev button by satish mallick (@satishmallick).
jQuery fadein and fadeout slider
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>jQuery custom slider</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="cleartype" content="on">
<![endif]-->
<link rel="shortcut icon" type="image/x-icon" href=" " />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href=" " />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href=" " />
<link rel="apple-touch-icon-precomposed" href=" " />
<script src="js/jquery.js"></script>
<script src="js/html5.js"></script>
<script src="js/ieh5fix.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/respond.js"></script>
</head>
<body>
<div id="page-wrapper">
<div id="slider-wrapper">
<div id="slider">
<div class="sp" style="background: blue;">1</div>
<div class="sp" style="background: yellow;">2</div>
<div class="sp" style="background: green;" >3</div>
<div class="sp" style="background: red;">4</div>
</div>
</div>
<div id="nav"></div>
<div id="button-previous">prev</div>
<div id="button-next">next</div>
</div>
<script>
$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$('#button-next').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':last-child')) {
$('.sp').first().addClass('active');
}
else{
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
$('#button-previous').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':first-child')) {
$('.sp').last().addClass('active');
}
else{
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
});
</script>
<style>
body{font-size:12px; font-family: 'Verdana';}
#page-wrapper{margin: 0 auto;position: relative;width: 500px;}
#slider-wrapper {width:500px; height:200px;}
#slider {width:500px; height:200px; position:relative;}
.sp {width:500px; height:200px; position:absolute;}
#nav {margin-top:20px; width:100%;}
#button-previous {float:left; cursor:pointer;}
#button-next {float:right;cursor:pointer;}
</style>
</body>
</html>
Hello,
No comments:
Post a Comment