JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div id="my-carousel-of-dreams">
  
  <span class="previous">&larr;</span>
  <span class="next">&rarr;</span>
  
  <ul class="carousel">
    <li>First Slide</li>
    <li>Second Slide</li>
    <li>Third Slide</li>
    <li>4 Slide</li>
    <li>5 Slide</li>
    <li>6 Slide</li>
    <li>7 Slide</li>
    <li>8 Slide</li>
    <li>9 Slide</li>
    <li>10 Slide</li>
    <li>11 Slide</li>
    <li>12 Slide</li>
    <li>13 Slide</li>
    <li>14 Slide</li>
    <li>15 Slide</li>
    <li>16 Slide</li>
    <li>17 Slide</li>
  </ul>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#my-carousel-of-dreams { position: relative; width: 100%; max-width: 950px; overflow: hidden; }
ul.carousel { margin: 0; padding: 0 20px; position: relative; width: 9999px; }
ul.carousel > li { width: 280px; float: left; padding: 10px; margin: 5px; overflow: hidden; }
ul.carousel li { list-style: none; }
#my-carousel-of-dreams .next, #my-carousel-of-dreams .prev { /* positioning for arrows here */ }

JavaScript

$(function(){

  var visibleItems = 3;

	var $carousel = $("ul.carousel");
	var $slideItems = $("ul.carousel > li");
	var $firstItem;

	var setCurrentItems = function() {
		/*$slideItems.hide();*/
    
		/*$('.current').removeClass('current');*/
		$currentItems = $("ul.carousel > li:lt(" + visibleItems + ")");
		/*$currentItems.addClass('current').show();*/
    
    
    /*$currentItems.show();*/
	}

	var nextItem = function() {
		$firstItem = $("ul.carousel > li:first-child");
		$carousel.append($firstItem);
		setCurrentItems();
	}

	var previousItem = function() {
		$lastItem = $("ul.carousel > li:last-child");
		$carousel.prepend($lastItem);
		setCurrentItems();
	}

	$("ul.carousel").siblings(".next").click(nextItem);
	$("ul.carousel").siblings(".previous").click(previousItem);

	setCurrentItems();

});