JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://caroufredsel.frebsite.nl/js/jquery/jquery.carouFredSel-5.5.0-packed.js"></script>
<a class="next" href="#">Next</a>
<a class="prev" href="#">Prev</a>
<ul>
    <li><img alt="Photo" src="http://placedog.com/100/100" /></li>
    <li><img alt="Photo" src="http://placedog.com/100/120" /></li>
    <li><img alt="Photo" src="http://placedog.com/100/110" /></li>
    <li><img alt="Photo" src="http://placedog.com/100/180" /></li>
    <li><img alt="Photo" src="http://placedog.com/100/130" /></li>
    <li><img alt="Photo" src="http://placedog.com/100/160" /></li>
    <li><img alt="Photo" src="http://placedog.com/100/70" /></li>
</ul>

CSS

body, html {
    margin: 0;
    height: 100%;
    }

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }

ul li img {
    margin-bottom: 20px;
    }

.prev, .next {
    position: absolute;
    left: 200px;
    padding: 5px;
    top: 25px;
    }

.next {
    top: 50px;
    }

JavaScript

$("ul").carouFredSel({
    direction: "up",
    align: "top",
    width: 100,
    height: "100%",
    items: {
        visible: "variable",
        width: 100,
        height: "variable"
    },
    scroll: {
        items: 1,
        mousewheel: true,
        easing: "swing",
        duration: 500
    },
    auto: false,
    prev: {
        button: ".prev",
        key: "up"
    },
    next: {
        button: ".next",
        key: "down"
    }
});