jQuery next().addClass() and prev().addClass() issue

Question

I am trying to make a slider. I have four contents, I made them one after the other and invisible. Then I have a class named active-client and it has the display: flex attribute. I display the first content with jQuery's addClass(). I want to slide them with arrows but it doesn't work.

$( document ).ready(function() {
    clientSection();
});

function clientSection(){
    $('.client-unit').first().addClass('active-client');

    $('.client-control-next, .client-control-prev').click(function() {
        var $this = $(this),
            curActiveClient = $('.clients-belt').find('.active-client'),
            position = $('.clients-belt').children().index(curActiveClient),
            clientNum = $('.client-unit').length;

        if ($this.hasClass('client-control-next')) {
            if (position < clientNum -1) {
                $('.active-client').removeClass('active-client').next().addClass('active-client');
            } else {
                $('.client-unit').removeClass('active-client').first().addClass('active-client');
            }
        } else {
            if (position === 0) {
                $('.client-unit').removeClass('active-client').last().addClass('active-client');
            } else {
                $('.active-client').removeClass('active-client').prev().addClass('active-client');
            }
        }
    });
}

#clients {
    position: relative;
}

.clients-belt {
    width: 100%;
    position: relative;
}

.clients-belt .client-unit {
    max-width: 750px;
    margin: 0 0 50px -375px;
    position: absolute;
    top: 0px;
    left: 50%;
    z-index: 1;
    display: none;
}

.clients-belt .client-unit.active-client {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}

.clients-belt .client-unit .client-face {
    min-width: 300px;
    text-align: center;
}

.clients-belt .client-unit .client-face img {
    max-width: 100px;
    border-radius: 50%;
}

.clients-belt .client-unit .client-face .client-name {
    display: block;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
}

.clients-belt .client-unit .client-face .client-title {
    font-size: 12px;
    font-style: normal;
    color: #999;
}

.clients-belt .client-unit .client-content {
    font-size: 18px;
    line-height: 36px;
    font-weight: 300;
    margin-top: -10px;
    position: relative;
}

.client-controls {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.client-controls > div {
    height: 40px;
    width: 40px;
    cursor: pointer;
}

.client-controls .client-control-next {
    position: absolute;
    top: 50%;
    right: 10px;
}

.client-controls .client-control-prev {
    position: absolute;
    top: 50%;
    left: 10px;
}

<div class="client-controls">
    <div class="client-control-next"><img src="/img/clients/next.svg" alt=""></div>
    <div class="client-control-prev"><img src="/img/clients/prev.svg" alt=""></div>
</div>

<div class="clients-belt">
    <div class="client-unit">
        <div class="client-face">
            <img src="img/clients/client1.jpg" alt="client-face">
            <strong class="client-name">Denn Summer</strong>
            <em class="client-title">Director of Programmer</em>
        </div>
        <div class="client-content">
            <div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
            <p><strong>Photoshop's version  of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris </p>
        </div>
    </div>
</div>

<div class="clients-belt">
    <div class="client-unit">
        <div class="client-face">
            <img src="img/clients/client2.jpg" alt="client-face">
            <strong class="client-name">Sott Spring</strong>
            <em class="client-title">Director of Designer</em>
        </div>
        <div class="client-content">
            <div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
            <p><strong>Photoshop's version  of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris </p>
        </div>
    </div>
</div>

<div class="clients-belt">
    <div class="client-unit">
        <div class="client-face">
            <img src="img/clients/client3.jpg" alt="client-face">
            <strong class="client-name">Bonn Winter</strong>
            <em class="client-title">Nothing of Web</em>
        </div>
        <div class="client-content">
            <div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
            <p><strong>Photoshop's version  of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris </p>
        </div>
    </div>
</div>

<div class="clients-belt">
    <div class="client-unit">
        <div class="client-face">
            <img src="img/clients/client4.jpg" alt="client-face">
            <strong class="client-name">Kate Roses</strong>
            <em class="client-title">Director of Nothing</em>
        </div>
        <div class="client-content">
            <div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
            <p><strong>Photoshop's version  of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris </p>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

I have changed code in this part with respect to the structure of HTML markup.

if ($this.hasClass('client-control-next')) {
                if (position < clientNum -1) {
                    $('.active-client').removeClass('active-client').parent().next().find(".client-unit").addClass('active-client');
                } else {
                    $('.client-unit').removeClass('active-client').first().addClass('active-client');
                }

} else {

                if (position === 0) {
                    $('.client-unit').removeClass('active-client').last().addClass('active-client');
                } else {

                    $('.active-client').removeClass('active-client').parent().prev().find(".client-unit").addClass('active-client');
                }

}

Please refer this fiddle.