javascript - Text Slideshow is not working -

i trying make "slideshow" change divs text inside. when last div being shown, next div shown should first one. if first div being shown, , click see previous one, slideshow should show last div. isn't working.

here code:

html:

<div name="div-default" class="div-default">     <?php         echo "$name";     ?> </div> <div id="div01" class="title-result active">     <?php         echo "seu número de personalidade é: $numerologia[0]";     ?> </div> <div id="div02" class="title-result">     <?php         echo "seu número de destino é: $numerologia[1]";     ?> </div> <div id="div03" class="title-result">     <?php         echo "seu número de lição de vida é: $numerologia[2]";     ?> </div> <div id="div04" class="title-result">     <?php         echo "o que sua data de nascimento diz sobre você? $numerologia[3]";     ?> </div> <div class="btm-box">     <button  id="preview" class="change-div"></button>     <button " id="next" class="change-div"></button> </div> 

script:

jquery(document).ready(function() {     (function ($) {         var = $('.active').attr('id');         //if not use 2 conditions below, code works partially, don't loop.         if (a == "div01") {             $('#preview').on('click', function() {                 $('.active').removeclass('active');                 $("#div04").addclass('active');             });              $('#next').on('click',function() {                 $('.active').removeclass('active').next().addclass('active');             });         }          if (a == "div04") {             $('#next').on('click',function() {                 $('.active').removeclass('active');                 $("#div01").addclass('active');             });              ('#preview').on('click',function() {                 $('.active').removeclass('active').prev().addclass('active');             });         }          $('#next').on('click',function() {             $('.active').removeclass('active').next().addclass('active');         });          $('#preview').on('click',function() {             $('.active').removeclass('active').prev().addclass('active');         });      })(jquery); }); 

can me fix it?

the first thing noticed setting id variable on document ready means "div01" , never change.

jquery(document).ready(function() {     (function ($) {         var = $('.active').attr('id'); // = div01 

also if blocks hit once when document ready never check id after first time.
you assigning 2 different click events each button, 1 in if block , 1 below if block. can cause skip slide because firing 2 different click events both change active slide is.

what need assign id inside of click event changes every time click 1 of buttons. need if blocks inside of click events too.

// next button click event      $('#next').on('click',function() {          var = $('.active').attr('id');           if (a == "div04"){               $('.active').removeclass('active');               $("#div01").addclass('active');          }          else{               $('.active').removeclass('active').next().addclass('active');          }      }); 

here's final code.

$(function(){      $('#next').on('click',function() {           var = $('.active').attr('id');            if (a == "div04"){                $('.active').removeclass('active');                $("#div01").addclass('active');           }           else{                $('.active').removeclass('active').next().addclass('active');           }      });       $('#preview').on('click',function() {           var = $('.active').attr('id');           if (a == "div01"){                $('.active').removeclass('active');                $("#div04").addclass('active');           }           else{                    $('.active').removeclass('active').prev().addclass('active');           }      }); }); 

here's working jsfiddle example

below way without needing check id's.

$(function(){     var slides = $(".slide"); // gets elements slide class     $("#next").click(function(){         var $active = $(".active");         $active.removeclass("active");         if($active.next(".slide").length > 0) // check if next element exists             $active.next(".slide").addclass("active");         else             $(slides[0]).addclass("active");  // make first slide active     });     $("#prev").click(function(){         var $active = $(".active");         $active.removeclass("active");         if($active.prev(".slide").length > 0) // check if next element exists             $active.prev(".slide").addclass("active");         else             $(slides[slides.length -1]).addclass("active"); // make last slide active     });  }); 

here's working jsfiddle example