JSFiddle - React, Tailwind, and code Playground

by tmyie

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;

var moveRight = function () {
    $('.slideshow-contents').animate({
        left: "+=10"
    }, speed);
};
var moveLeft = function () {
    $('.slideshow-contents').animate({
        left: "-=10"
    }, speed);
};

$('.right').mousedown(function () {
    timer = setInterval(moveRight, speed);
}).mouseup(function () {
    clearInterval(timer);
});

$('.left').mousedown(function () {
    timer = setInterval(moveLeft, speed);
}).mouseup(function () {
    clearInterval(timer);
});