JQuery Content Arrow Navigation

Question

I've been in trouble with this code: http://jsfiddle.net/xarlyblack/4wsx3zkx/

I want to do a jQuery fadeIn/Out content navigation.

It works when I go to the next div and then back again. But when I'm in the last div and I click next, the content disappears (why had created an if statement to return to the first). It happens the same when I'm in the first div and click to previous, is that I want to go to the last div.

I tried with .last() / .first() .find()eq() . But anything goes. I think I'm missing something.

jQuery code:

 var ilust = $('.ilust'); var wrapper = ilust.find('.pag-ilust'); var pag = wrapper.find('.pag'); var btn = ilust.find('.nav-btn'); btn.click(function(){ if ($(this).hasClass('nav-next')){ var currentPag = $('.active-pag'); var nextPag = currentPag.next(); currentPag.fadeOut('fast').removeClass('active-pag'); nextPag.fadeIn('slow').addClass('active-pag'); if (nextPag = false){ nextPag = pag.first(); } } else if ($(this).hasClass('nav-prev')){ currentPag = $('.active-pag'); prevPag = currentPag.prev(); currentPag.fadeOut('fast').removeClass('active-pag'); prevPag.fadeIn('slow').addClass('active-pag'); } }); 

Answer 1

You need to see whether the next/prev returned any element using its length, also you need to do it as soon as you try to fetch the next/prev element and if they are not present then need to assign the default value.

 var ilust = $('.ilust'); var wrapper = ilust.find('.pag-ilust'); var pag = wrapper.find('.pag'); var btn = ilust.find('.nav-btn'); btn.click(function() { if ($(this).hasClass('nav-next')) { var currentPag = $('.active-pag'); var nextPag = currentPag.next(); if (!nextPag.length) { nextPag = pag.first(); } currentPag.stop().fadeOut('fast').removeClass('active-pag'); nextPag.fadeIn('slow').addClass('active-pag'); } else if ($(this).hasClass('nav-prev')) { var currentPag = $('.active-pag'); var prevPag = currentPag.prev(); if (!prevPag.length) { prevPag = pag.last(); } currentPag.stop().fadeOut('fast').removeClass('active-pag'); prevPag.fadeIn('slow').addClass('active-pag'); } }); 

 .pag:nth-child(n+2) { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="ilust"> <div class="nav-cat"> <a href="#" class="nav-btn nav-prev">Prev</a> <a href="#" class="nav-btn nav-next">Next</a> </div> <div class="pag-ilust"> <div class="pag active-pag"> <p>Things 0</p> <p>Lot Things</p> </div> <div class="pag"> <p>Things 1</p> <p>Lot Things</p> </div> <div class="pag"> <p>Things 2</p> <p>Lot Things</p> </div> <div class="pag"> <p>Things 3</p> <p>Lot Things</p> </div> </div> 

Answer 2

More simplified version

$('.nav-btn').on('click',function(){
    var next=$('.active-pag').next(); //get active page's next element
    var prev=$('.active-pag').prev(); //get active page's prev element
    $('.active-pag').fadeOut('fast').removeClass('active-pag'); //fadeOut active div
    if($(this).hasClass('nav-prev')){ //check whether clicked button is prev or next
        if(prev.length!=0) //check if previous element is present
        {
            prev.fadeIn('slow').addClass('active-pag'); //if yes fade that in
        }
        else
            $('.pag:last').fadeIn('slow').addClass('active-pag'); //fade last element in
    }
    else
    {
        if(next.length!=0) //checking for next element
        {
            next.fadeIn('slow').addClass('active-pag'); //if present fadeIn next element
        }
        else
            $('.pag:first').fadeIn('slow').addClass('active-pag');//if not fade in first element
    }
});

DEMO

Answer 3

Replace this: var nextPag = currentPag.next();

By this:

var nextPag;
if(currentPag.next().length>0){
      nextPag = currentPag.next();
}else{
      nextPag = $(".pag").first();
}

And this: var prevPag = currentPag.prev();

By this:

var prevPag;
if(currentPag.prev().length>0){
       prevPag = currentPag.prev();
}else{
       prevPag = $(".pag").last();
}

Here is your updated JSFiddle demo