JSFiddle - React, Tailwind, and code Playground

by MichelleGlauser

CSS

html, body, div {
  background: #555;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: black;
  text-align: center;
  background: white;
  font-size: 60px;
  font-weight: bold;
}

.slick-slider { margin: 0 !important; }

img {
 width : 200px
}
}

JavaScript

function add_swipe_controls (init) {
 void function (init) {
  var target_obj = init.target, initial_x, initial_y, current_x, current_y, swipe_in_effect = false
  target_obj.addEventListener ('mousedown' , swipe_start_event)
  target_obj.addEventListener ('mousemove' , swipe_event)
  target_obj.addEventListener ('mouseup' , function (evt) {if (swipe_in_effect == false) return; swipe_end_event (evt)})
  target_obj.addEventListener ('mouseout' , function (evt) {if (swipe_in_effect == false) return; swipe_end_event (evt)})
  function swipe_end (evt) {
   if (swipe_in_effect == false) return
   swipe_in_effect = false
   if (typeof init.end_effect != "undefined") init.end_effect (evt)
  }
  function swipe_start_event (evt) {
   if ((typeof init.start_condition != "undefined") && (init.start_condition (evt) == false)) return
   var xy = getXY(evt, target_obj); initial_x = xy[0]; initial_y = xy[1]
   current_x = initial_x; current_y = initial_y
   if (swipe_in_effect == true) return
   swipe_in_effect = true
   if (typeof init.start_effect != "undefined") init.start_effect (evt)
  }
  function swipe_event (evt) {
   if ((typeof init.continue_condition != "undefined") && (init.continue_condition(evt) === false)) {swipe_end (evt); return}
   var xy = getXY(evt, target_obj); current_x = xy[0]; current_y = xy[1]
  }
  function swipe_end_event (evt) {
   if ((typeof init.continue_condition != "undefined") && (init.continue_condition(evt) === false)) {swipe_end (evt); return}
   if (current_x < initial_x) {
    if (typeof init.swipe_left != "undefined") init.swipe_left (evt)
   } else {
    if ((current_x > initial_x) && (typeof init.swipe_right != "undefined")) init.swipe_right (evt)
   }
   if (current_y < initial_y) {
    if (typeof init.swipe_down != "undefined") init.swipe_down (evt)
   } else {
    if ((current_y > initial_y) && (typeof init.swipe_up != "undefined")) init.swipe_up (evt)
   }
   swipe_end (evt)
  }
 } (init)
}

function getXY (evt, target) {
 if (typeof...