JSFiddle - React, Tailwind, and code Playground

by tommaitland

JavaScript

(function(window, $){

  var Carousel = function(elem, options){
    this.elem = elem;
    this.$elem = $(elem);
    this.options = options;
  };

  Carousel.prototype = {
    
    defaults: {
      transition: 'fade',
      speed: 5000,
      pauseOnHover: true,
      slide: 'img',
      slideClass: 'slide',            
      activeClass: 'active',
      lastClass: 'last',
      nextClass: 'next'
    },

    init: function() {
      this.config = $.extend({}, this.defaults, this.options);

      this.create();
      this.run();

      return this;
    },

    create: function() {

      // basic css structure
      this.$elem.addClass('transition-' + this.config.transition); // transition class
      this.$elem.find(this.config.slide).addClass(this.config.slideClass); // slide class

      // set first slide
      this.$elem.find(this.config.slide + ':first').addClass(this.config.activeClass);
      this.$elem.find(this.config.slide + ':last').addClass(this.config.lastClass);
      this.$elem.find('.' + this.config.activeClass).next(this.config.slide).addClass(this.config.nextClass);

    },

    // basic slide swap
    swap: function($next, $after) {

      // swap classes
      this.$elem.find('.' + this.config.lastClass).removeClass(this.config.lastClass);
      this.$elem.find('.' + this.config.activeClass).removeClass(this.config.activeClass).addClass(this.config.lastClass); // last active
      $next.removeClass(this.config.nextClass + ' ' + this.config.lastClass).addClass(this.config.activeClass); // currently active
      $after.addClass(this.config.nextClass); // next active

    },

    // goes to a specific slide number
    slide: function(e) {

      // get specified slides, loop
      var $active = this.$elem.find(this.config.slide + ':nth-child(' + e + ')');
      
      // get following slide
      if ($active.next(this.config.slide).length == 0) var $next = this.$elem.find(this.config.slide + ':first')
      else var $next =...