JSFiddle - React, Tailwind, and code Playground

by Alex Chizhov

HTML

<div class="myslider">
  <div class="item" style="background-image:url(http://cdn.bmwblog.com/wp-content/uploads/BMW-10-750x500.jpg);"></div>
  <div class="item" style="background-image:url(http://cdn.bmwblog.com/wp-content/uploads/BMW-10-750x500.jpg);"></div>
  <div class="item" style="background-image:url(http://cdn.bmwblog.com/wp-content/uploads/BMW-10-750x500.jpg);"></div>
  <div class="item" style="background-image:url(http://cdn.bmwblog.com/wp-content/uploads/BMW-10-750x500.jpg);"></div>
</div>

SCSS

.ac-carousel-wrapper{
  width:600px;
  //height:220px;
  display:block;
  padding:0;
  margin:0;
  box-sizing:border-box;
  background:red;
  overflow:hidden;
    
  .ac-carousel-scroller{
    width:100%;
    height:20px;
    display:block;
    background:lime;
    padding-top:5px;
    box-sizing:border-box;
    
    .ac-carousel-scrollbar{
      height:10px;
      display:block;
      background:purple;
    }
  }
  
  .ac-carousel-navigation{
    width:100%;
    height:30px;
    display:block;
    background:coral;
  }
  
  .ac-carousel-container{
    width:100%;
    height:200px;
    display:block;
    box-sizing:border-box;
    
    &:after{
      display:block;
      content:'';
      clear:both;
    }
    
    .item{
      width:200px;
      height:200px;
      display:block;
      background-position:center;
      background-repeat:no-repeat;
      background-size:cover;
      float:left;
    }
  }
  
}

JavaScript

;(function ( $, window, document, undefined ) {

  var pluginName = 'acCarousel';
  var defaults = {
    itemClass: 'item',
    itemWidth: 200
  };
	
  // Consturctor
  function acCarousel(element, options)
  {
		this.element 		= element;
    this.options 		= $.extend({}, defaults, options);
    this._defaults 	= defaults;
    this._name 			= pluginName;
    
    this.init();
  }
  
  /**
   * Initialize caraousel
   */
  acCarousel.prototype.init = function()
  {
  	// Set carousel class to element
  	$(this.element).addClass('ac-carousel-container');
  	
    this.setupWrapper();
    
    this.setupItems();
    
    $(this.element).css({
    	'width': this.sliderWidth
    });
    
    this.setupScroller();
    
    this.setupNavigation();
    
  }
  
  /** 
   * Setup carousel wrapper
   */
  acCarousel.prototype.setupWrapper = function()
  {
  	// Wrap element
    $(this.element).wrap('<div />');
    
    // Set wrapper
    this.wrapper = $(this.element).parent();
    
    // Add class to wrapper
    $(this.wrapper).addClass('ac-carousel-wrapper');
    
    this.wrapperWidth = $(this.wrapper).outerWidth();
  }
  
  /**
   * Setup carousel items
   */
  acCarousel.prototype.setupItems = function()
  {
  	// Set items
    this.items = $(this.element).find('.item');
    
    // Get number of items
    this.itemsCount = this.items.length;
    
    this.sliderWidth = this.itemsCount * parseInt(this.options.itemWidth);
  }
  
  /**
   * Setup container scroller
   */
  acCarousel.prototype.setupScroller = function()
  {
  	this.scroller = $('<div />').appendTo(this.wrapper);
    
    $(this.scroller).addClass('ac-carousel-scroller');
    
    this.scrollBar = $('<div />').appendTo(this.scroller);
    
    this.scrollBarWidth = this.wrapperWidth / this.sliderWidth * 100;
    
    $(this.scrollBar).addClass('ac-carousel-scrollbar')
    								 .css({
                     	'width': this.scrollBarWidth+'%'
                     });
    
    var scrollBarWidth 	=...