Add custom arrows to the slider

Question

I have ms2Gallery on MODX website. And I want to add some functionality (add left and right buttons).

<div class="large-12 medium-12 columns main_page_preview text-center">
            <div class="main_page_title large-8 medium-8 large-offset-2 medium-offset-2 columns">
                <h1>NAME</h1>
            </div>

            <div id="msGallery">
    <div class="large-12 medium-12 columns" style="max-height: 845px; overflow: hidden; margin-bottom: 15px;" href="/assets/images/resources/33/banya-10.jpg">
    <img src="/assets/images/resources/33/banya-10.jpg" width="100%" alt="" title="" id="mainImage">
    </div>
    <div class="clearfix"></div>
        <div class="large-2 medium-2 columns">
    <a href="/assets/images/resources/33/banya-01.jpg" class="thumbnail" data-image="/assets/images/resources/33/banya-01.jpg">
        <img src="/assets/images/resources/33/360x270/banya-01.jpg" alt="" title="banya_01.jpg" width="100%" data-id="">
    </a>
</div>
<div class="large-2 medium-2 columns">
    <a href="/assets/images/resources/33/banya-04.jpg" class="thumbnail" data-image="/assets/images/resources/33/banya-04.jpg">
        <img src="/assets/images/resources/33/360x270/banya-04.jpg" alt="" title="banya_04.jpg" width="100%" data-id="">
    </a>
</div>
<div class="large-2 medium-2 columns">
    <a href="/assets/images/resources/33/banya-06.jpg" class="thumbnail" data-image="/assets/images/resources/33/banya-06.jpg">
        <img src="/assets/images/resources/33/360x270/banya-06.jpg" alt="" title="banya_06.jpg" width="100%" data-id="">
    </a>
</div>

        <a href="javascript:void(0)"><img src="build/img/prev-left.png" class="left-arrow-gallery" id="leftarrow"></a>
        <a href="javascript:void(0)"><img src="build/img/next-right.png" class="right-arrrow-gallery" id="rightarrow"></a>
        </div>

To solve this problem I created this js-code:

var clicks= 0;
$('#rightarrow').on('click', function(){
    clicks += 1;
    $( ".thumbnail").eq(clicks).trigger("click");
})
var leftClicks = $('.thumbnail').length;
    $('#leftarrow').on('click', function(){
    leftClicks -= 1;
    $( ".thumbnail").eq(leftClicks).trigger("click");
})

But I want to decrease elements on the left click, no matter how many times I clicked on right arrow.

Answer 1

var clicks = 0;
var leftClicks = 0;
var _ElementCount = $(".thumbnail").length;
$('#rightarrow').on('click', function(){
    clicks = _ElementCount ? clicks = 0 : clicks += 1;
    $( ".thumbnail").eq(clicks).trigger("click");
})
var leftClicks = $('.thumbnail').length;
    $('#leftarrow').on('click', function(){
    leftClicks = 0 ? clicks = _ElementCount : clicks -= 1;
    $( ".thumbnail").eq(leftClicks).trigger("click");
})