JSFiddle - React, Tailwind, and code Playground

by MichelleGlauser

HTML

<div id="main">
       <h1>Swipe right for yes</br> and left for no.</h1>
    <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 300px; height: 200px; overflow: hidden;">
            <!-- Loading Screen -->
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <img src="{{ STATIC_URL }}images/loading.png"/>
        </div>
        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 300px; height: 180px;">
            <div><img src="{{ STATIC_URL }}images/indian.jpg" alt="" title=""/></div> 
            <div><img src="{{ STATIC_URL }}images/hamburger.jpg" alt="" title=""/></div> 
            <div><img src="{{ STATIC_URL }}images/italian-pizza.jpg" alt="" title=""/></div> 
            <div><img src="{{ STATIC_URL }}images/hummus.jpg" alt="" title=""/></div> 
            <div><img src="{{ STATIC_URL }}images/pie.jpg" alt="" title=""/></div> 
            <div><img src="{{ STATIC_URL }}images/montecristo.jpg" alt="" title=""/></div> 
            <div><img src="{{ STATIC_URL }}images/eclairs.jpg" alt="" title=""/></div> 
        </div> 
    </div>
</div>  
</div>

JavaScript

jQuery(document).ready(function ($) {

        var options = {
            $FillMode: 4,
        };                            
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);

        //swipe handling begin
        var swipeStartPosition;
        var noList = [];
        var yesList = [];
        function OnSwipeStart(position, virtualPosition)
        {
            lastSwipePosition = virtualPosition;
        }

        function OnSwipeEnd(position, virtualPosition)
        {
            if(virtualPosition > swipeStartPosition)
            {
                //swipe to left end, do something here
                var currentSlideIndex = jssor_slider1.$CurrentIndex();
                $this.push(noList);
                $this.hide();
            }
            else
            {
                //swipe to right end, do something here
                var currentSlideIndex = jssor_slider1.$CurrentIndex();
                $this.push(yesList);
                $this.hide();
            }
            return noList;
            return yesList;

            console.log(noList);
            console.log(yesList);
        }    
        jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_START, OnSwipeStart);
        jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_END, OnSwipeEnd);
        //swipe handling end

        //responsive code begin
        function ScaleSlider() {
            var parentWidth = $('#slider1_container').parent().width();
            if (parentWidth) {
                jssor_slider1.$SetScaleWidth(parentWidth);
            }
            else
                window.setTimeout(ScaleSlider, 30);
        }
        //Scale slider after document ready
        ScaleSlider();
        if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
            //Capture window resize event
            $(window).bind('resize', ScaleSlider);
        }
        //responsive code end
    });