JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<div id="image-carousel">
</div>

CSS

.carousel-wrapper {background: #efefef;height: 100px; position: relative; }
.carousel-wrapper .carousel-inner {width: 100%; height: 100%; overflow: hidden; position: relative;}
.carousel-wrapper .carousel-container { position: absolute; float: left;}
.carousel-wrapper .carousel-previous,
.carousel-wrapper .carousel-next { position: absolute; top: 0; display: block; height: 100%; width: 50px; background: #ccc; border: none; }
.carousel-wrapper .carousel-previous { left: -50px;}
.carousel-wrapper .carousel-next { right: -50px;}

.carousel-wrapper .carousel-previous span,
.carousel-wrapper .carousel-next span {display: block; height: 100%; width: 100%; cursor: pointer;}

.carousel-wrapper .carousel-container a { display:inline-block; margin: 12px 0 12px 13px;}

#image-carousel {padding: 0 50px;}

JavaScript

var Carousel = function(options){
    this.initialize(options);
};

Carousel.prototype = {
   options:{
     active: 0
    ,navigation: false
    ,steps:3
    ,previous:{
       HTMLclass:'carousel-previous'
      ,HTML: '<span>Previous</span>'
      ,events:{
          click: function(){
              this.previous();
          }
      }
    }
    ,next: {
       HTMLclass:'carousel-next'
      ,HTML:'<span>Next</span>'
      ,events:{
          click: function(){
              this.next();
          }
      }
    }
    ,image:{
         width:75
        ,events:{
            click:function(e){
                e.preventDefault();
                console.log('Hello');
            }
        }
    }
  }
  ,_currentSlide: null
  ,_currentPosition:0
  ,initialize: function(options){
      // Abstract out this extend.
    this.options = jQuery.extend(true,this.options, (options || {}));
    this._currentSlide = this.options.active || 0;
    
    var doc = this.doc = document;
    this.wrapper = jQuery(doc.createElement('div')).addClass('carousel-wrapper');
    var hidden = jQuery(doc.createElement('div')).addClass('carousel-inner');
    this.container = jQuery(doc.createElement('div')).addClass('carousel-container');
    hidden.append(this.container);
    this.wrapper.append(hidden);
      
    if(this.options.navigation){
      this.addNavigation();
    }
      
    this.attachEvents();
    
  }
    
  ,attachEvents: function(){
    var self = this;
    /* This attaches all the events inside this.options[prev/next].events */
    if(this.nav){
      for(var key in this.nav){
        if(this.nav.hasOwnProperty(key)){
          var events = this.options[key].events;
          for(var event in events){
            var fn = events[event];
            if(fn && (typeof fn == 'function')){
              this.nav[key][event](fn.bind(self));
            }                
          }
        }
      }
    }
    
    for(var event in this.options.image.events){
       ...