My Information: FadeIn FadeOut divs using Next Previous button using jQuery

Monday 24 August 2015

FadeIn FadeOut divs using Next Previous button using jQuery

Hello,

<!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().fadeIn(1000).prev().fadeOut(1000);
else {
$(".alldivs div:visible").fadeOut(1000);
$(".alldivs div:first").fadeIn(1000);
}
return false;
});

$("#prev").click(function(){
if ($(".alldivs div:visible").prev().length != 0)
$(".alldivs div:visible").prev().fadeIn().next().fadeOut(1000);
else {
$(".alldivs div:visible").fadeOut(1000);
$(".alldivs div:last").fadeIn(1000);
}
return false;
});

});
</script>
</head>

<body>

FadeIn FadeOut 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>

Pages

Monday 24 August 2015

FadeIn FadeOut divs using Next Previous button using jQuery