JSFiddle - React, Tailwind, and code Playground

by MichelleGlauser

JavaScript

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]); }
            }
        } 
        console.log("HUH?");
        else (slider.currentSlide === 0) {
            console.log("All gone!");
        }
        console.log("WHAT?");
    }
});