JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contentslider">
<div id="contslider" class="floatleft">
<div id="one" class="contsliders floatleft slidersmate">
<p class="intro">Bidco an introduction</p>
<h1 class="headerone">We believe in the future of Africa</h1>

</div>
<div id="two" class="contsliders floatleft slidersmate">
<h1 class="headerone">Our Goal</h1>

</div>
<div id="three" class="contsliders floatleft slidersmate">
<h1 class="headerone">Our Vision</h1>

</div>
<div id="four" class="contsliders floatleft slidersmate">
<h1 class="headerone">Our Values</h1>

</div>
<div id="five" class="contsliders floatleft slidersmate">
<h1 class="headerone">Our Philosophy</h1>



</div>
<div class="contsnextprev"><span class="prev floatleft">&lt;</span> <span class="next floatright">&gt;</span></div>
</div>
<div class="clearfix"> </div>
</div>

CSS

span.next, span.prev{cursor:pointer;}

JavaScript

$('div.contsliders:gt(0)').hide(); //Hide all but the first one

var $allSlides = $('div.contsliders'), 
    traverseDefault = "first", //set the defaults
    actionDefault ="next";

$('span.next, span.prev').click(function(){

    var traverse = traverseDefault,
        action = actionDefault;

    if($(this).is('.prev')){ //if action is prev
        traverse = "last"; //set traverse to last in case nothing is available
        action = "prev"; //set action to prev
    }

    var $curr = $allSlides.filter(':visible'), //get the visible slide
        $nxtTarget =  $curr[action](".contsliders"); //get the next target based on the action.

    $curr.stop(true, true).fadeIn(1000).hide(); //hide current one

    if (!$nxtTarget.length){ //if no next
        $nxtTarget = $allSlides[traverse](); //based on traverse pick the next one
    }

    $nxtTarget.stop(true, true).fadeIn(1000); //show the target

});