<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<title>Next Previous button</title>
<script type="">
$(document).ready(function(){
$(".alldivs div").each(function(e) {
if (e != 0)
$(this).hide();
});
$("#next").click(function(){
if ($(".alldivs div:visible").next().length != 0)
$(".alldivs div:visible").next().show().prev().hide('slide', {direction: 'left'}, 1000);
else {
$(".alldivs div:visible").hide('slide', {direction: 'left'}, 1000);
$(".alldivs div:first").show();
}
return false;
});
$("#prev").click(function(){
if ($(".alldivs div:visible").prev().length != 0)
$(".alldivs div:visible").prev().show().next().hide('slide', {direction: 'left'}, 1000);
else {
$(".alldivs div:visible").hide('slide', {direction: 'left'}, 1000);
$(".alldivs div:last").show();
}
return false;
});
});
</script>
</head>
<body>
Sliding divs using Next Previous button using jQuery
<div class="alldivs">
<div class="slide1">Slide 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide2">Slide 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide3">Slide 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide4">Slide 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide5">Slide 5 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide6">Slide 6 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide7">Slide 7 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide8">Slide 8 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide9">Slide 9 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide10">Slide 10 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide11">Slide 11 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide12">Slide 12 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
</div>
<a id="next">next</a>
<a id="prev">prev</a>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<title>Next Previous button</title>
<script type="">
$(document).ready(function(){
$(".alldivs div").each(function(e) {
if (e != 0)
$(this).hide();
});
$("#next").click(function(){
if ($(".alldivs div:visible").next().length != 0)
$(".alldivs div:visible").next().show().prev().hide('slide', {direction: 'left'}, 1000);
else {
$(".alldivs div:visible").hide('slide', {direction: 'left'}, 1000);
$(".alldivs div:first").show();
}
return false;
});
$("#prev").click(function(){
if ($(".alldivs div:visible").prev().length != 0)
$(".alldivs div:visible").prev().show().next().hide('slide', {direction: 'left'}, 1000);
else {
$(".alldivs div:visible").hide('slide', {direction: 'left'}, 1000);
$(".alldivs div:last").show();
}
return false;
});
});
</script>
</head>
<body>
Sliding divs using Next Previous button using jQuery
<div class="alldivs">
<div class="slide1">Slide 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide2">Slide 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide3">Slide 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide4">Slide 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide5">Slide 5 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide6">Slide 6 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide7">Slide 7 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide8">Slide 8 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide9">Slide 9 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide10">Slide 10 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide11">Slide 11 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide12">Slide 12 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
</div>
<a id="next">next</a>
<a id="prev">prev</a>
</body>
</html>
0 komentar:
Post a Comment