JSFiddle - React, Tailwind, and code Playground

HTML

<button id="tras">
    <</button>
        <button id="frente">></button>
        <div id="fotos">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
            </ul>
        </div>

CSS

* {
    margin: opx;
    padding:0px;
}
button {
    padding: 5px;
    font-size: 1.5em;
}
#fotos{
    margin-top:30px;
    width:650px;
    overflow-x: hidden;
    height:135px;
    border:1px solid #CCC;
    white-space: nowrap;
}

#fotos ul li{

    margin-right:4px;
    cursor: pointer;
    width:100px;
    height:100px;
    background:#CCC;
    border:1px solid #555;
    display: inline-block;
}

JavaScript

var scrollAtual = 0;
$('#tras, #frente').click(fazerScroll);

function fazerScroll(e) {
    var direcao = e.target.id == 'frente' ? 1 : -1;
    $('#fotos').animate({
        scrollLeft: scrollAtual += 200 * direcao
    }, 1000);
}