JSFiddle - React, Tailwind, and code Playground

by SeasonEnds

HTML

<div id="important-info">
<div id="slider-container">
    <a href="#" class="arrow left">L</a>
    <a href="#" class="arrow right">R</a>
    <ul class="slider">
        <li>Slide 1</li>
        <li>Slide 2</li>
        <li>Slide 3</li>
    </ul>
</div>
</div>

CSS

#important-info {
    padding-left:40px;
    background: orange;
    float: left;
}

#slider-container {
    width: 220px;
    height: 200px;
    margin: 0;
    position: relative;
}

ul {
    width: 220px;
    height: 200px;
    background: #000;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

ul li {
    width: 220px;
    height:200px;
    color: #fff;
    line-height: 200px;
    text-align: center;
    position: relative;
    display: block;
}

.arrow {
    position: absolute;
    display: block;
    background: white;
    z-index: 999;
    height:30px;
    width:20px;
    color: black;
    line-height:20px;
    top: 50%; 
    margin-top: -15px;
    text-align:center;
}

.left {
    left:0;
}

.right {
    right:0px;
}

JavaScript

$( document ).ready(function() {
    
// This gives total slides 
var count = $(".slider li").length;

//Set i for counting purposes
var i = 0;

//Set arrows
var arrowleft = $('.arrow.left');
var arrowright = $('.arrow.right');
    
arrowleft.click(function(e){
   //if not at beggining - subtract count
   //if at beggining - disable button and don't subtract
    if (i>0) {
        i--;
    } else if (i==0) {
        arrowleft.hide();
    }
});
                      
arrowright.click(function(e){
   //if not at end - add count
   //if at end movetobeggining();
    if (i<count && i>0) {
        i++;
        slideright();
    } else if (i==0) {
        i++;
        slideright();
        arrowleft.show();
    } else if (i==count) {
        //movetobeggining()
    }
   e.preventDefault()
});

function movetobeggining() {
    //$(".slider ul li:first-child").prependTo(".slider ul");
    //set i to 0
}

function slideright() {
    $('.slider li').animate({ "left": "-=610px" }, 1000 );
}

});