JSFiddle - React, Tailwind, and code Playground

by suri_295

HTML

<div id="carousel_container" class="carousel_container">
        <ul>
            <li><a href="#"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></a></li>
            <li><a href="#"><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></a></li>
            <li><a href="#"><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></a></li>
            <li><a href="#"><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></a></li>
            <li><a href="#"><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></a></li>
            <li><a href="#"><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></a></li>
            <li><a href="#"><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></a></li>
            <li><a href="#"><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></a></li>
            <li><a href="#"><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></a></li>
            <li><a href="#"><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></a></li>
        </ul>
    </div>
  <div class="carousel_container">
        <ul>
            <li><a href="#"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></a></li>
            <li><a href="#"><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></a></li>
            <li><a href="#"><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></a></li>
            <li><a href="#"><img...

CSS

#carousel_container {
    display: none;
}

#carousel_container ul {
  left: 0; /* important (this should be negative number of list items width(including margin) */
  list-style: none; /* removing the default styling for unordered list items */
  margin: 0;
  padding: 0;
  position: relative;
  width: 9999px;
}

#carousel_container ul li{
  background-color: #f7f7f7;
  float: left;
  margin: 0 10px 0 0; /* default margin is 10px if not user specified */
  padding: 0;
  height: 75px; /* make this dynamic */
  width: 75px;  /* make this dynamic */
}

#carousel_inner {
  float: left;
  overflow: hidden;
  width: 500px; /* default width if js disabled */
}

.arrows {
  float: left;
  position: relative;
  top: 30px;
  width: 15px;
}

JavaScript

$(function() {

    /*
    Gets the n previous elements
    The last element is considered previous to the first element
    If "me" is true, include this element in the list as well
    */
    
    $.fn.prevLoop = function(n, me) {
        var $cur = this,
            results = [];
        if (me) results.unshift($cur[0]);
        while (n-- > 0) {
            $cur = $cur.prev();
            if (!$cur.length) { //We were at the first element
                $cur = this.parent().children().last(); //Go to the last element
            }
            results.unshift($cur[0]);
        }
        return $(results);
    };

    /*
    Gets the n next elements
    The first element is considered next after the first element
    If "me" is true, include this element in the list as well
    */

    
    $.fn.nextLoop = function(n, me) {
        var $cur = this,
            results = [];
        if (me) results.push($cur[0]);
        while (n-- > 0) {
            $cur = $cur.next();
            if (!$cur.length) { //We were at the last element
                $cur = this.parent().children().first(); //Go to the first element
            }
            results.push($cur[0]);
        }
        return $(results);
    };


    // User specified properties
    var numSlide = 2;
    var rowSize = 5; // # of elements to display at a time
    var marginRight = 20; // Amount of margin between elements
    var rowScroll = false; // Bool which adds 1 element at a time, or a whole row (rowSize)
    var infinite = true;

    // Container properties
    var container = $('#carousel_container');
    container.find('ul').wrap('<div id="carousel_inner" />'); // Wraps our hidden container. Order matters
    var containerInner = $('#carousel_inner');
    var ul = container.find('ul');
    var li = container.find('li');
    var numElements = li.size(); // Total # of elements
    var thumbWidth = li.innerWidth(); // Width of thumbnails
    var thumbHeight = li.outerWidth(); // Height of...