JSFiddle - React, Tailwind, and code Playground
JavaScript
/*jslint browser: true*/
/*global $, jQuery, define, module, exports*/
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(function () {
return factory(root);
});
} else if (typeof exports === 'object') {
module.exports = factory;
} else {
root.Carousel = factory(root);
}
})(this, function () {
'use strict';
var Carousel = function (options) {
if (!this || !(this instanceof Carousel)) {
return new Carousel(options);
}
if (typeof options === 'string') {
options = { key : options };
}
this.target = options.target;
this.early();
};
Carousel.init = function (options) {
return new Carousel(options);
};
Carousel.prototype = {
early: function () {
this.target.append('<span class="nav-left"></span><span class="nav-right"></span>');
this.setupClass();
this.events();
},
isInViewport: function ($el) {
if (typeof jQuery === "function" && $el instanceof jQuery) {
$el = $el[0];
}
var rect = $el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
},
setupClass: function () {
var carouselBox = this.target.find('.carousel-box');
carouselBox.eq(0).addClass('left');
carouselBox.eq(1).addClass('is-active');
carouselBox.eq(2).addClass('right');
},
moveCarousel: function ($el, direction, reverse, callback) {
var $current = this.target.find('.is-active'),
indexActive;
$el.removeClass(direction);
...