Jquery adding class to wrong semantic

Question

I try to build image slider with markup HTML and script below:

HTML

<div id="button-previous">prev</div>  <div id="button-next">next</div>


<figure>

<a href="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg">
<img src="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg" />
</a>

<a href="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg">
<img src="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg"/>
</a>

<a href="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg">
<img src="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg"/>
</a>

<a href="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg" >
<img src="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg"/>
</a>

<figcaption>no need class "active" or "oldActive" or on figcation sematic</figcaption>

</figure>

The script

$(document).ready(function () {
    $('figure a').first().addClass('active');
    $('figure a').hide();
    $('figure a.active').show();

    $('#button-next').click(function () {

        $('figure a.active').removeClass('active').addClass('oldActive');
        if ($('figure a.oldActive').is('figure a.oldActive:last-child')) {
            $('figure a').first().addClass('active');
        } else {
            $('figure a.oldActive').next().addClass('active');
        }
        $('figure a.oldActive').removeClass('oldActive');
        $('figure a').fadeOut();
        $('figure a.active').fadeIn();


    });

    $('#button-previous').click(function () {
        $('figure a.active').removeClass('active').addClass('oldActive');
        if ($('figure .oldActive').is(':first-child')) {
            $('figure a').last().addClass('active');
        } else {
            $('figure a.oldActive').prev().addClass('active');
        }
        $('figure a.oldActive').removeClass('oldActive');
        $('figure a').fadeOut();
        $('figure a.active').fadeIn();
    });

});

ISSUES WITH NEXT CLICK, (last-child)

1. No have any problerm with #button-previous.
2. But the script still send/add class="active" at <figcaption> after last-child of figure a when click #button-next at the last-child of figure a.
3. And slider will stop function rotate to fisrt-child back.

[DEMO]

THANKS IN ADVANCE.

Answer 1

The problem is that inside the figure tag, figcaption is the last child, not the last a tag! So the second line of $('#button-next').click have to be changed from this:

if ($('figure a.oldActive').is('figure a.oldActive:last-child')) {

...to this:

if ($('figure a.oldActive').is('figure a.oldActive:nth-last-child(2)')) {

jsfiddle