JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
        <div id="slider1" class="slider">
            <ul>
                <li><img src="http://placehold.it/100x160"></li>
                <li><div style="width:250px;height:160px;background:#cccccc;">I am div.</div></li>
                <li><img src="http://placehold.it/150x160"></li>
                <li><div style="width:170px;height:160px;background:#cccccc;"> foobar</div></li>
                <li><img src="http://placehold.it/15x160"></li>
                <li><img src="http://placehold.it/140x160"></li>
                <li><img src="http://placehold.it/200x160"></li>
                <li><img src="http://placehold.it/500x160"></li>
                <li><img src="http://placehold.it/100x160"></li>
                <li><img src="http://placehold.it/5x160"></li>
                <li><img src="http://placehold.it/140x160"></li>
                <li><img src="http://placehold.it/50x160"></li>
                <li><img src="http://placehold.it/168x160"></li>
                <li><img src="http://placehold.it/400x160"></li>
                <li><img src="http://placehold.it/150x160"></li>
                <li><img src="http://placehold.it/30x160"></li>
            </ul>
        </div>
        <div class="controls">
            <a href="#" class="prev-page">Prev Page</a> |
            <a href="#" class="prev-slide">Prev Slide</a> |
            <a href="#" class="next-slide">Next Slide</a> |
            <a href="#" class="next-page">Next Page</a>
        </div>
    </div>

CSS

.wrap { width:640px; margin:20px; }
    body div.slider    { overflow:hidden; position:relative; width:100%; height:160px !important;color:#919191; }
    body div.slider ul { margin:0; padding:0; height:160px; }
    body div.slider li { float:left; list-style:none; margin:0 5px 0 0; }
    body div.slider li { text-align:center; line-height:160px; font-size:25px; }

JavaScript

/*
 * Lemmon Slider - jQuery Plugin
 * Simple and lightweight slider/carousel supporting variable elements/images widths.
 *
 * Examples and documentation at: http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php
 *
 * Copyright (c) 2011 Jakub Pelák <[email protected]>
 *
 * Version: 0.2 (9/6/2011)
 * Requires: jQuery v1.4+
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */
(function( $ ){

    var _css = {};

    var methods = {
        //
        // Initialzie plugin
        //
        init : function( options ){
            
            var options = $.extend( {}, $.fn.lemmonSlider.defaults, options );
            
            return this.each(function(){
                
                var $slider = $( this ),
                    data = $slider.data( 'slider' );
                
                if ( ! data ){
                    
                    var $sliderContainer = $slider.find( options.slider ),
                        $sliderControls = $slider.next().filter( '.controls' ),
                        $items = $sliderContainer.find( options.items ),
                        originalWidth = 1;

                    $items.each(function(){ originalWidth += $( this ).outerWidth( true ) });
                    $sliderContainer.width( originalWidth );
                    
                    // slide to last item
                    if ( options.slideToLast ) $sliderContainer.css( 'padding-right', $slider.width() );

                    // infinite carousel
                    if ( options.infinite ){

                        originalWidth = originalWidth * 3;
                        $sliderContainer.width( originalWidth );
                        
                        $items.clone().addClass( '-after' ).insertAfter( $items.filter(':last') );
                        $items.filter( ':first' ).before( $items.clone().addClass('-before') );

         ...