JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://nettuts.s3.amazonaws.com/377_slider/slider_sourcefiles/jqueryui/css/smoothness/jquery-ui-1.7.2.custom.css">
<div id="sliderContent" class="ui-corner-all">    
  <h2>Some well known galactic nebulae and their vital statistics</h2>        
  <div class="viewer ui-corner-all">
    <div class="content-conveyor ui-helper-clearfix">

      <div class="item">
        <h2>Omega Nebula</h2>
        <img src="http://nettuts.s3.amazonaws.com/377_slider/slider_sourcefiles/images/omega.jpg" alt="Omega Nebula">
        <dl class="details ui-helper-clearfix">
          <dt>Distance from Earth:</dt><dd>5000 - 6000 lightyears</dd>
          <dt>Diameter:</dt><dd>15 Lightyears</dd>
          <dt>Mass:</dt><dd>800 solar masses</dd>
          <dt>Catalogue number:</dt><dd>M17 / NGC6618</dd>
          <dt>Discovered in:</dt><dd>1764</dd>
          <dt>Discoverer:</dt><dd>Philippe Loys de Ch&eacute;seaux</dd>
        </dl>
      </div>

      <div class="item">
        <h2>Rosette Nebula</h2>
        <img src="http://nettuts.s3.amazonaws.com/377_slider/slider_sourcefiles/images/rosette.jpg" alt="Rosette Nebula">
        <dl class="details ui-helper-clearfix">
          <dt>Distance from Earth:</dt><dd>5200 lightyears</dd>
          <dt>Diameter:</dt><dd>130 lightyears</dd>
          <dt>Mass:</dt><dd>10'000 solar masses</dd>
          <dt>Catalogue number:</dt><dd>NGC2244</dd>
          <dt>Discovered in:</dt><dd>1690</dd>
          <dt>Discoverer:</dt><dd>John Flamsteed</dd>
        </dl>
      </div>
      
      <div class="item">
        <h2>Ring Nebula</h2>
        <img src="http://nettuts.s3.amazonaws.com/377_slider/slider_sourcefiles/images/ring.jpg" alt="Ring Nebula">
        <dl class="details ui-helper-clearfix">
          <dt>Distance from Earth:</dt><dd>2300 lightyears</dd>
          <dt>Diameter:</dt><dd>2.6 lightyears</dd>
          <dt>Mass:</dt><dd>1.2 solar masses</dd>
          <dt>Catalogue number:</dt><dd>M57 / NGC6822</dd>
     ...

CSS

h2 { text-align:center; font:normal 150% Georgia; margin: 1em 0; }
#sliderContent { width:650px; margin:2em auto 0; padding:0 50px 50px; background-color:#ebebeb; border:1px solid #898989; position: relative; }
.viewer { width:607px; height:343px; margin:0 auto 40px; padding:1px; overflow:hidden; position:relative; border:1px solid #898989; }
.content-conveyor { width:610px; height:335px; position:relative; }
.item { width:304px; float:left; font-family:Tahoma; text-align:center; background-color:#ebebeb; }
.item h2 { font-size:100%; margin:10px 0; }
.item dl { margin:10px 0; }
.item dt, .item dd { float:left; width:149px; text-align:right; margin:0; font-size:70%; }
.item dt { font-weight:bold; margin-right:5px; }
.item dd { text-align:left; }
.item img { border:1px solid #898989; background-color:#ffffff; padding:1px; }

#prev, #next { position: absolute; top: 200px; font-size: 2em; cursor: pointer; background: #fff; color: #000; padding: 0 10px; }
#prev:hover, #next:hover { background: #000; color: #fff; }
#prev { left: 15px; }
#next { right: 15px; }

JavaScript

//vars
var conveyor = $(".content-conveyor", $("#sliderContent")),
item = $(".item", $("#sliderContent"));

//set length of conveyor
conveyor.css("width", item.length * parseInt(item.css("width")));

var max = (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width"));

//config
var sliderOpts = {
  max: max,
  slide: function(e, ui) { 
    conveyor.css("left", "-" + ui.value + "px");
  }
};

//create slider
$("#slider").slider(sliderOpts);

var pageWidth = 300;
var pages = Math.ceil(max / pageWidth);
$('#prev, #next').click(function(){
    var current = $("#slider").slider('value');
    var to = $(this).is('#prev') ? current - pageWidth : current + pageWidth;
    $('#prev, #next').show();

    if(to <= 0)
        $('#prev').hide();
    else if(to >= max - pageWidth)
        $('#next').hide();

    $("#slider").slider('value', to);
    sliderOpts.slide(null, { value: to });
});
$('#prev').trigger('click'); // init