JSFiddle - React, Tailwind, and code Playground

by nhulea

JavaScript

var sWrap = document.querySelector('.slider-wrap');
    var holder = document.querySelector('.holder'),
      stop, containerWidth, sNum;
    var frameLi = document.querySelectorAll("ul > li")[this.index];
    var frameIndicator = function(numFrames) {
      var f = document.getElementById('frame-indicator');
      for (var i = numFrames - 1; i >= 0; i--) {
        var li = document.createElement("li");
        f.appendChild(li);
      }
      document.querySelectorAll("ul > li")[0].className ='selected';
    };
    else {
      var slider = {
        el: {
          slider: $("#slider"),
          holder: $(".holder"),
          imgSlide: $(".slide"),
          frameDot: $("#frame-indicator li")
        },
        slideWidth: window.innerWidth,
        touchstartx: undefined,
        touchmovex: undefined,
        movex: undefined,
        index: 0,
        longTouch: undefined,
        init: function() {
          this.bindUIEvents();
                sWrap.style.width = window.innerWidth + "px";
          sWrap.style.height = window.innerHeight + "px";
      sNum = $('.slide').length;
      holder.style.width = 100 * Number(sNum) + "%";
      Array.prototype.forEach.call(document.querySelectorAll(".slide-wrapper"), function(arr) {
        arr.style.height = window.innerHeight + "px";
        arr.style.width = 100 / Number(sNum) + "%";
      });
      Array.prototype.forEach.call(document.querySelectorAll(".slide"), function(arr) {
        arr.style.backgroundSize = 'cover';
      });
      stop = Number(window.innerWidth) * Number(sNum);
      frameIndicator(sNum);
    };
    if (navigator.msMaxTouchPoints) {
      $('#slider').addClass('ms-touch');
      $('#slider').on('scroll', function() {
        $('.slide-image').css('transform', 'translate3d(-' + (100 - $(this).scrollLeft() / 6) + 'px,0,0)');
      });
        },
        bindUIEvents: function() {
          this.el.holder.on("touchstart", function(event) {
            slider.start(event);
          });
 ...