JSFiddle - React, Tailwind, and code Playground

by luka kupunia

JavaScript

function ecoistSlider() {
  var e = document.querySelectorAll("#ecoist-slider .slider-container .item"),
    t = 0,
    s = "transform: translate(0%,0) scale(1); transform-origin: left; opacity: 1",
    c = "transform: translate(-100%,0) scale(0.55); transform-origin: right; opacity: 0.5",
    i = "transform: translate(0%,0) scale(0.3); transform-origin: center; opacity: 0",
    o = "transform: translate(100%,0) scale(0.55); transform-origin: left; opacity: 0.5",
    r = "transform: translate(100%,0) scale(0.55); transform-origin: left; opacity: 0.5",
    n = "transform: translate(0%,0) scale(0.3); transform-origin: center; opacity: 0",
    l = "transform: translate(-100%,0) scale(0.55); transform-origin: right; opacity: 0.5";
  document.querySelectorAll("#ecoist-popup .popup .close-svg").forEach(function(e) {
    e.addEventListener("click", function() {
      document.querySelector("#ecoist-popup").classList.remove("active"), document.querySelector("#ecoist-popup .popup").classList.remove("active")
    })
  }), e.forEach(function(a) {
    a.style.cssText = "transform: translate(0,0) scale(0); opacity: 0", a.addEventListener("mousemove", function(e) {
      this.getBoundingClientRect().left > window.innerWidth / 2 ? (document.querySelector("#cursor").classList = "", document.querySelector("#cursor").classList.add("next-btn")) : (document.querySelector("#cursor").classList = "", document.querySelector("#cursor").classList.add("prev-btn")), this.classList.contains("active") && (document.querySelector("#cursor").classList = "", document.querySelector("#cursor").classList.add("play-btn"))
    }), a.addEventListener("mouseover", function() {
      this.classList.add("hovered")
    }), a.addEventListener("mouseleave", function() {
      this.classList.remove("hovered")
    }), a.addEventListener("click", function(a) {
      this.classList.contains("active") && (document.querySelector("#ecoist-popup").classList.add("active"), document.querySelector('#ecoist-popup...