JSFiddle - React, Tailwind, and code Playground

by sarfarazdesigner

HTML

<div class="wrapper">
    <div class="ddCarousel">
         <ul id="carousel">
            <li><div>A</div></li>
            <li><div>B</div></li>
            <li><div>C</div></li>
            <li><div>D</div></li>
            <li><div>E</div></li>
            <li><div>F</div></li>
            <li><div>G</div></li>
            <li><div>H</div></li>
            <li><div>I</div></li>
            <li><div>J</div></li>
            <li><div>K</div></li>
            <li><div>L</div></li>
         </ul>
    </div>
</div>

CSS

*{margin:0; padding:0;}
body{font-size:100%; font-family:Arial, Helvetica, sans-serif; color:#858585;}
.wrapper{width:960px; margin:50px auto;}
.ddCarousel{height: 80px;overflow: hidden; position:relative; width:960px;}
#carousel {overflow: hidden;position: relative; list-style:none;}
#carousel li{width:150px;height:80px;float:left;display: block;  }
#carousel li div{cursor: pointer; border:1px solid #eaeaea; text-align:center; vertical-align:middle; font-size:30px; padding:20px 0; margin-right:10px;}

JavaScript

(function($){
    $.fn.ddCarousel = function(options){
		
		var defaults = { 
			//btnPrev: null,			// previous button customization
			//btnNext: null,			// next button customization
			//mouseWheel: true,		// shall the carousel handle the mousewheel event to animate ?
			auto: false,			// shall the carousel start automatically
			speed: 2000,				// speed in ms of the animation.
			easing: 'linear',		// linear animation.
			direction : 'left',
			circular: true,			// run in circular mode. Means : images never reach the end.
			visible: '50%',  // size of the carousel on the screen. Can be in percent '100%', in pixels '100px', or in images '3' (for 3 images)
			//vertical: false,		// set the carousel in a vertical mode
			//start: 0,				// position in pixels that the carousel shall start at
			//scroll: 1,
			
			//step: 50,				// value in pixels, or "default"
			//eltByElt: false,		// if activated, the carousel will move image by image, not more, not less.
			//evtStart : 'mouseover',	// start event that we want for the animation (click, mouseover, mousedown, etc..)
			//evtStop : 'mouseout',	// stop event that we want for the animation (blur, mouseout, mouseup, etc..)
			//beforeStart: null,		// Not used yet
			//afterEnd: null			// Not used yet
	  	};
	 	var opts = $.extend(defaults, options);
		
		//console.log(opts.position);
		
		return this.each(function(){
			var div = $(this); // selecting div
			var ul = $(this).children('ul'); //selecting ul 
			var li = ul.children('li')
			var tChild =  $(ul).children('li').size(); //getting length of childs
			var tChildWidth = $(ul).children('li').outerWidth(true); //getting width of a single child
			var vis = opts.visible;
			var lastInCss = (vis.toString().indexOf("%") != -1 ? '%' : (vis.toString().indexOf("px") != -1) ? 'px' : 'el');
			
						
			ul.css("width", tChildWidth*tChild + 'px');
			var cWid = ul.outerWidth()
			
			
			// Calculates the size of the main div according to the given size (can be in...