javascript - JQuery Content Arrow Navigation -
i've been in trouble code: http://jsfiddle.net/xarlyblack/4wsx3zkx/
i want jquery fadein/out content navigation.
it works when go next div , again. when i'm in last div , click next, content disappears (why had created if statement return first). happens same when i'm in first div , click previous, want go last div.
i tried .last()
/ .first()
.find()eq()
. goes. 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'); } });
you need see whether next/prev returned element using length, need try fetch next/prev element , if not present need assign 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>
Comments
Post a Comment