JSFiddle - React, Tailwind, and code Playground

by Vasiliy

HTML

<div tabindex="1" style="position: relative; outline: none; width: 650px; height: 400px; border-radius: 0px; transform-origin: 0px 0px 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 21px 0px; background-color: rgb(255, 255, 255); transform: scale(1) translate(0px, 0px);" data-shadow-distance="0" id="adoric_smartbox_078e635d9d1"><div class="adoric_element element-shape closeLightboxButton" style="left: 14px; top: 11px; position: absolute; display: flex; flex-direction: column; width: 18px; height: 18px; line-height: normal; opacity: 1; cursor: pointer; z-index: 63;" data-width="26" data-height="26" data-left="670" data-top="-28" data-radius="0.00"><!--?xml version="1.0" encoding="utf-8"?--> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="width: 100%; height: 100%; opacity: 1; box-shadow: none; border-radius: 0px;" xml:space="preserve" class="inner-element" width="100%" height="100%" preserveAspectRatio="none" data-event-name="Conversion" data-shadow-distance="0" data-base-bg-color="rgb(94, 94, 94)" onmouseover="var e=this.getAttribute(&quot;data-hover-bg-color&quot;),t=&quot;path, polygon, circle&quot;,n=this.querySelectorAll(&quot;path, polygon, circle, line&quot;)[0];this.setAttribute(&quot;data-base-bg-color&quot;,n.getAttribute(&quot;fill&quot;)||n.getAttribute(&quot;stroke&quot;)||n.style.fill),Array.prototype.forEach.call(this.querySelectorAll(t),function(t){t.setAttribute(&quot;fill&quot;,e)})" onmouseout="var e=this.getAttribute(&quot;data-base-bg-color&quot;),t=&quot;path, polygon, circle&quot;;Array.prototype.forEach.call(this.querySelectorAll(t),function(t){t.setAttribute(&quot;fill&quot;,e)})" data-hover-bg-color="rgb(137, 137, 137)" data-width="NaN" data-height="NaN" data-left="NaN" data-top="NaN"> <polygon style="" points="15.778,2.343 13.657,0.222 8,5.879 2.343,0.222 0.222,2.343 5.879,8 0.222,13.657  	2.343,15.778 8,10.121 13.657,15.778...

JavaScript

(function() {
  'use strict';

  window.PureJSCarousel = function(settings) {
    this.carousel          = document.querySelector(settings.carousel);
    this.slides            = this.carousel.querySelectorAll(settings.slide);
    this.btnNext           = this.carousel.querySelector(settings.btnNext) || null;
    this.btnPrev           = this.carousel.querySelector(settings.btnPrev) || null;
    this.activeIndex       = settings.activeIndex || 0;
    this.oneByOne          = settings.oneByOne || false;
    this.speed             = settings.speed || 400;
    this.delay             = settings.delay || 0;
    this.effect            = settings.effect || 'linear';
    this.infinite          = settings.infinite || false;
    this.autoplay          = settings.autoplay || false;
    this.autoplayDelay     = settings.autoplayDelay || 400;
    this.autoplayDirection = settings.autoplayDirection || 'next';

    this.autoplayTimer     = null;
    this.minPos            = null;
    this.slidesToShow      = null;
    this.maxIndex          = null;
    this.isEnabled         = null;

    this.build();
  };

  PureJSCarousel.prototype.build = function() {
    var _                    = this,
        dotsLength,
        i,
        windowResizeTimeout,
        windowWidth          = window.innerWidth,
        windowHeight         = window.innerHeight;

    _.minPos       = (_.carousel.offsetWidth - (_.slides.length * _.slides[0].offsetWidth));
    _.slidesToShow = Math.round(_.carousel.offsetWidth / _.slides[0].offsetWidth);
    _.maxIndex     = 0;
    _.isEnabled    = 1;

    _.carousel.className += ' purejscarousel';

    //create slides container
    _.slidesContainer = document.createElement('div');
    _.carousel.insertBefore(_.slidesContainer, _.slides[0]);
    _.slidesContainer.className += ' purejscarousel-slides-container';
    if (_.infinite === true) {
      _.slidesContainer.style.marginLeft = - (_.slides[0].offsetWidth * _.slides.length) + 'px';
     ...