LIKE SWIPE

by Nick Hulea

HTML

<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick.css">
<div class="slider slick-loading">Swipe to the right for yes and left for no.
</div>    
<div class="results">
</div>

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; }

JavaScript

(function () {
    var noList = [];
    var yesList = [];
    var images = ["<img src='http://i1360.photobucket.com/albums/r653/brylans2013/Brylans%20Cafe%20Advertisment/9f34ef72-615e-45e9-a182-ec0c670f63a6_zps7d960dc7.jpg'/>", "<img src='http://i1037.photobucket.com/albums/a452/drmadvertising/Peninsula%20Papers/Peninsula%20Puzzles/HibachiGrillPuzz.jpg'/>", "<img src='http://i242.photobucket.com/albums/ff231/bour3/things%20I%20made%20then%20ate/hamburger.jpg'/>"];     
    
var carousel = $('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    onBeforeChange: function (slider) {
        /** Super hacky... if you check direction at this point, you know which way we're going. */
        carousel.direction = slider.swipeDirection();
    },
    onAfterChange: function (slider, index) {
        if (slider.currentSlide === 1) {
            
            /** If you successfully swiped to the second item, clean up the first item and add the next item. */
            var previousImage = carousel.removePreviousImage();
            carousel.addNextImage();
            
            /** Fire event nope or yup based on direction. */
            if (previousImage) {
                if (carousel.direction === 'left') { carousel.trigger('nope', [previousImage]); }
                else { carousel.trigger('yup', [previousImage]); }
            }
        } 

        // else {
        //     console.log("ALL GONE!");
        //     }
        } 
});
    
    carousel.addNextImage = function () {
        var nextImage = images.shift();
        this.images = this.images || [];
        this.images.push(nextImage);
        this.slickAdd($('<div>', { html: nextImage }));
    };
    
    carousel.removePreviousImage = function () {
        var previousImage = this.images.shift();
        this.slickRemove(0);
        return previousImage;
    };
    
    /** Prepare the first two items. */
    carousel.addNextImage();
    carousel.addNextImage();
    
    carousel.sortImages =...