JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slideshow-container">
    <div class="slideshow-contents">
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
    </div>
</div>
        <a href="#" class="left">&larr;</a> <a href="#" class="right">&rarr;</a>

CSS

.slideshow-container {
    border: 1px solid red;
    width: 600px;
    height: 75px;
    overflow: hidden;
    font-size: 0;
    height: 150px;
    white-space: nowrap;
}

.slideshow-contents {
    position: relative;
}

.img {
    height: 150px;
    width: 100px;
    display: inline-block;
    margin: 0 5px;
    
}

.img:nth-of-type(odd) {
    background-color: lightblue;
}

.img:nth-of-type(even) {
    background-color: salmon;
}

.img:first-of-type {
    background-color: green;
}

JavaScript

var speed = 100;
var timer;

$('.right, .left').mousedown(function() {
    // choose direction
    if ($(this).attr('class')=='right')
        var direction = "+=10";
    else
        var direction = "-=10";
    // start moving
    timer = setInterval(function(){
        $('.slideshow-contents').animate({left: direction}, speed);
    }, speed);
}).mouseup(function() {
    // stop
    clearInterval(timer);
});