JSFiddle - React, Tailwind, and code Playground

HTML

<button id="left">&laquo;</button> <button id="right">&raquo;</button>
<div class="block">

    <div id="safety"></div>
    <div id="security"></div>
    <div id="reliability"></div>
    <div id="secure"></div>
</div>

CSS

#safety,#security,#reliability,#secure {width:1000px;height:90px;display:block;float:left;}

#safety {background-color:red;}
#security {background-color:black;}
#reliability {background-color:green;}
#secure {background-color:pink;}

.block {width:4000px;  position:absolute;
  background-color:#abc;
  height:90px;
}
.show {display:block;}
.current {visibility:hidden;height:0!important;width:0!important;overflow:hidden;}
#slider {width:100px;height:100px;overflow:hidden;}

nav {width:100%;height:40px;overflow:hidden;}
.move {width:100%;height:40px;background:white;display:block;float:left;}

JavaScript

var n = $(".block > div").length; //Count the total number of slides
var i = n; //Set a counter to monitor which slide is being viewed
$("#right").attr("disabled", true); //Since it always starts on the last slide there's no point having an active right button


$("#right").click(function(){
    $(".block").animate({"left": "+=1000px"}, "slow");
    
    //If you've clicked the right button that means there's content to the left so make sure the left button is activated
    if($("#left").attr("disabled")){
        $("#left").removeAttr("disabled");
    }
    i++; //Update the counter
    
    //If it's the last slide, disable the right button
    if(i == n){
        $("#right").attr("disabled", true);
    }
});

//Same checks for the left button
$("#left").click(function(){
  $(".block").animate({"left": "-=1000px"}, "slow");
    if($("#right").attr("disabled")){
        $("#right").removeAttr("disabled");
    }
    i--;
    if(i == 1){
        $("#left").attr("disabled", true);
    }
});