JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider3">
                            <a class="buttons prev" href="#">left</a>
                            <div class="viewport">
                                <ul class="overview">
                                    <li><img src="images/picture7.jpg" /></li>
                                    <li><img src="images/picture5.jpg" /></li>
                                    <li><img src="images/picture6.jpg" /></li>
                                    <li><img src="images/picture4.jpg" /></li>
                                    <li><img src="images/picture3.jpg" /></li>
                                    <li><img src="images/picture2.jpg" /></li>                            
                                </ul>
                            </div>
                            <a class="buttons next" href="#">right</a>
                            <ul class="pager">
                                <li><a href='#' class="pagenum active" rel="0">1</a></li>
                                <li><a href='#' class="pagenum"rel="1">2</a></li>
                                <li><a href='#' class="pagenum" rel="2">3</a></li>
                                <li><a href='#' class="pagenum" rel="3">4</a></li>
                                <li><a href='#' class="pagenum" rel="4">5</a></li>
                                <li><a href='#' class="pagenum" rel="5">6</a></li>
                            </ul>
                        </div>

CSS

#slider3 { height: 1%; overflow:hidden; padding: 0 0 10px 0; }
#slider3 .viewport { width: 240px; height: 125px; float: left; overflow: hidden; position: relative; }
#slider3 .pager { overflow:hidden; list-style: none; clear: both; margin: 0 0 0 45px; }
#slider3 .pager li { float: left; }
#slider3 .buttons { display: block; margin: 30px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }
#slider3 .next { background-position: 0 0; margin: 30px 0 0 10px; }
#slider3 .disable { visibility: hidden; }
#slider3 .pagenum { background-color: #fff; text-decoration: none; text-align: center; padding: 5px; color: #555555; font-size: 14px; font-weight: bold; display: block; }
#slider3 .active { color: #fff; background-color:  #555555; }
#slider3 .overview { list-style: none; position: absolute; width: 240px; left: 0 top: 0; }
#slider3 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}

JavaScript

(function($){
    $.fn.tinycarousel = function(options){
        var defaults = { 
            start: 1, // where should the carousel start?
            display: 1, // how many blocks do you want to move at 1 time?
            axis: 'x', // vertical or horizontal scroller? ( x || y ).
            controls: true, // show left and right navigation buttons.
            pager: false, // is there a page number navigation present?
            interval: false, // move to another block on intervals.
            intervaltime: 3000, // interval time in milliseconds.
            animation: true, // false is instant, true is animate.
            duration: 1000, // how fast must the animation move in ms?
            callback: null // function that executes after every move
        };
        var options = $.extend(defaults, options);  

        var oSlider = $(this);
        var oViewport = $('.viewport', oSlider);
        var oContent = $('.overview', oSlider);
        var oPages = oContent.children();
        var oBtnNext = $('.next', oSlider);
        var oBtnPrev = $('.prev', oSlider);
        var oPager = $('.pager', oSlider);
        var iPageSize, iSteps, iCurrent, oTimer, bForward = true, bAxis = options.axis == 'x';

        return this.each(function(){
            initialize();
        });
        function initialize(){
            iPageSize = bAxis ? $(oPages[0]).outerWidth(true) : $(oPages[0]).outerHeight(true);
            var iLeftover = Math.ceil(((bAxis ? oViewport.outerWidth() : oViewport.outerHeight()) / (iPageSize * options.display)) -1);
            iSteps = Math.max(1, Math.ceil(oPages.length / options.display) - iLeftover);
            iCurrent = Math.min(iSteps, Math.max(1, options.start)) -2;
            oContent.css(bAxis ? 'width' : 'height', (iPageSize * oPages.length));
            move(1);
            setEvents();
        }
        function setButtons(){
            if(options.controls){
                oBtnPrev.toggleClass('disable', !(iCurrent >...