JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<div class="carousel-nav clearfix">
  <div id="prev">Previous</div>
  <div id="next">Next</div>
</div>
<div id="carousel-wrap">
  <ul id="list" class="clearfix">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  
  
  <script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
<link href="https://assets.juicer.io/embed.css" media="all" rel="stylesheet" type="text/css" />
<ul class="juicer-feed" data-feed-id="mynghs"><h1 class="referral"><a href="https://www.juicer.io">Powered by Juicer</a></h1></ul>
  
  
  
</div>

CSS

#carousel-wrap {
  border: 1px solid #000;
  width: 400px;
  overflow: hidden;
}

#list {
  overflow: hidden;
  padding: 10px;
  width: 1600px;
}

#list>li {
  overflow: hidden;
  padding: 0;
  width: 25%;
  display: inline-block;
  float: left;
}

JavaScript

$('#prev').on('click', function() {
  var $last = $('#list li:last');
  $last.remove().css({
    'margin-left': '-400px'
  });
  $('#list li:first').before($last);
  $last.animate({
    'margin-left': '0px'
  }, 1000);
});

$('#next').on('click', function() {
  var $first = $('#list li:first');
  $first.animate({
    'margin-left': '-400px'
  }, 1000, function() {
    $first.remove().css({
      'margin-left': '0px'
    });
    $('#list li:last').after($first);
  });
});