JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigator">

<div class="left_hand_icon">Left</div>
<div class="right_hand_icon">Right</div>
</div>

<div id="slides">
    <div id="slide1">Slide 1 content</div> <!-- displayed by default and i need to slide this away when the next slide is requested -->
    <div id="slide2">Slide 2 content</div>
    <div id="slide3">Slide 3 content</div>
    <div id="slide4">Slide 4 content</div>
</div>

JavaScript

jQuery.fn.extend({
  slideRightShow: function(speed) {
    return this.each(function() {
        $(this).show('slide', {direction: 'right'}, +speed || 1000);
    });
  },
  slideLeftHide: function(speed) {
    return this.each(function() {
      $(this).hide('slide', {direction: 'left'}, +speed || 1000);
    });
  },
  slideRightHide: function(speed) {
    return this.each(function() {
      $(this).hide('slide', {direction: 'right'}, +speed || 1000);
    });
  },
  slideLeftShow: function(speed) {
    return this.each(function() {
      $(this).show('slide', {direction: 'left'}, +speed || 1000);
    });
  }
});


$(document).ready(function () {
    $("#slides :first-child").addClass("currentSlide");
    $("#slides :not(:first-child)").hide();
    
    $(".left_hand_icon").button().click(function () {
        currentSlide = $("#slides .currentSlide");
        
        if(currentSlide.prev().prev().size() < 1) {
            // The incoming slide is the first - disable Left button
            $(".left_hand_icon").button("disable");
        }
        
        currentSlide.prev().addClass("currentSlide");
        currentSlide.removeClass("currentSlide");
        
        currentSlide.prev().slideLeftShow();
        currentSlide.slideRightHide();
        
        $(".right_hand_icon").button("enable");
    }).button("disable");
    
    $(".right_hand_icon").button().click(function () {
        currentSlide = $("#slides .currentSlide");
        
        if(currentSlide.next().next().size() < 1) {
            // The incoming slide is the last - disable Right button
            $(".right_hand_icon").button("disable");
        }
        
        currentSlide.next().addClass("currentSlide");
        currentSlide.removeClass("currentSlide");
        
        currentSlide.next().slideRightShow();
        currentSlide.slideLeftHide();
        
        $(".left_hand_icon").button("enable");
    });
});