Showing posts with label Sliding divs using Next Previous button using jQuery. Show all posts
Showing posts with label Sliding divs using Next Previous button using jQuery. Show all posts

Monday, 24 August 2015

Sliding divs using Next Previous button using jQuery

<!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>