Прокрутите или переместите div по горизонтали влево и вправо при нажатии и удержании кнопки с помощью JS / JQuery

Question

Я пытаюсь сделать раздел с несколькими изображениями разных размеров. У меня есть левая кнопка прокрутки и правая кнопка прокрутки. При нажатии кнопки или удержании мыши я хочу переместить div влево / вправо, чтобы пользователь мог видеть другие изображения, которые не видны на экране, перемещаясь влево / вправо.

Так же, как слайдер изображений в магазине Google Play.

https://play.google.com/store/apps/details?id=vsin.t16_funny_photo&hl=en_IN

Сразу под названием и описанием приложения есть ползунок с изображениями и стрелкой.

Я написал этот код, составленный из нескольких ссылок:

var isDown = false;
$arrowRight = $(".ts-slide-left");
$arrowLeft = $(".ts-slide-right");
$arrowRight.mousedown(function(){isDown = true;});
$arrowLeft.mousedown(function(){isDown = true;});
$(document).mouseup(function(){
    if(isDown){
        isDown = false;
    }
}); 

$arrowRight.mousedown(function() {
    moveSlider('+=20');
});
$arrowLeft.mousedown(function() {
    moveSlider('-=20');
});

function moveSlider(intMovement){
    $( ".ts-cover-slides" ).animate({
        'left': intMovement +'px'
    }, 50, function() {
        if (isDown){
            moveSlider(intMovement);
        }
    });
}

.ts-product-cover {
    padding-left: 50px;
    padding-right: 50px;
}
.ts-product-cover-wrapper {
    position: relative;
}
.ts-product-cover-wrapper .ts-product-img-slider {
    overflow: hidden;
}
.ts-product-cover-wrapper .ts-product-img-slider .ts-cover-slides {
    position: relative;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}
.ts-product-cover-wrapper .ts-product-img-slider .ts-product-cover-item + .ts-product-cover-item {
    margin-left: 20px;
}
.ts-product-cover-wrapper .ts-product-img-slider .ts-product-cover-item img {
    height: 100%;
    width: auto;
    max-width: none;
}
.ts-product-cover-wrapper .ts-slide-arrow.ts-slide-left {
    left: -30px;
}
.ts-product-cover-wrapper .ts-slide-arrow {
    position: absolute;
    top: 45%;
}
.ts-product-cover-wrapper .ts-slide-arrow.ts-slide-right {
    right: -30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="ts-product-cover">
<div class="ts-product-cover-wrapper">
                                                    <div class="ts-product-img-slider">
                                                        <div class="d-flex ts-cover-slides">
                                                            <div class="ts-product-cover-item">
                                                                <a href="/assets/images/product-cover.jpg" data-lightbox="cover-set">
                                                                    <img class="d-block rounded ts-border" src="http://blacklistedvfx.com/assets/images/product-cover.jpg" alt="Cover Photo">
                                                                </a>
                                                            </div>
                                                            <div class="ts-product-cover-item">
                                                                <a href="/assets/images/intro-video.jpg" data-lightbox="cover-set">
                                                                    <img class="d-block rounded ts-border" src="http://blacklistedvfx.com/assets/images/intro-video.jpg" alt="Cover Photo">
                                                                </a>
                                                            </div>
                                                            <div class="ts-product-cover-item">
                                                                <a href="/assets/images/product-cover.jpg" data-lightbox="cover-set">
                                                                    <img class="d-block rounded ts-border" src="http://blacklistedvfx.com/assets/images/product-cover.jpg" alt="Cover Photo">
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="ts-scroll-arrows">
                                                        <a class="ts-slide-arrow ts-slide-left" href="#/" direction="left">
                                                            <img src="http://blacklistedvfx.com/assets/images/left-arrow.png" width="13" height="19">
                                                        </a>
                                                        <a class="ts-slide-arrow ts-slide-right" href="#/" direction="right">
                                                            <img src="http://blacklistedvfx.com/assets/images/right-arrow.png" width="13" height="19">
                                                        </a>
                                                    </div>
                                                </div>
                                                </div>

Этот код работает, но я не знаю, как остановить движение, когда div находится на правом или левом краю.

Скрипка