Text Slideshow is not working

Question

I am trying to make a "slideshow" to change divs with text inside. When the last div is being shown, the next div to be shown should be the first one. If the first div is being shown, and you click to see the previous one, the slideshow should show the last div. But it isn't working.

Here is the 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 a = $('.active').attr('id');
        //If I do not use the two conditions below, the code works partially, but don't do the 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 anyone help me to fix it?

Answer 1

The first thing i noticed is that your setting your id variable on document ready which means it will always be "div01" and never change.

jQuery(document).ready(function() {
    (function ($) {
        var a = $('.active').attr('id'); // a will always = div01

Also the if blocks are only hit once when the document is ready so it will never check what id it is after the first time.
You are also assigning two different click events to each button, one in the if block and one below the if block. This can cause it to skip a slide because it is firing two different click events that both change what the active slide is.

What you need to do is assign your id inside of the click event so it changes every time you click one of the buttons. You would also need to do your if blocks inside of your click events too.

// next button click event 
    $('#next').on('click',function() {
         var a = $('.active').attr('id');

         if (a == "div04"){
              $('.active').removeClass('active');
              $("#div01").addClass('active');
         }
         else{
              $('.active').removeClass('active').next().addClass('active');
         }
     });

Here's the final code.

$(function(){
     $('#next').on('click',function() {
          var a = $('.active').attr('id');

          if (a == "div04"){
               $('.active').removeClass('active');
               $("#div01").addClass('active');
          }
          else{
               $('.active').removeClass('active').next().addClass('active');
          }
     });

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

Here's a working jsfiddle example

Below is another way you could do it without needing to check the id's.

$(function(){
    var slides = $(".slide"); // gets all elements with the 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 the working jsfiddle example