JSFiddle - React, Tailwind, and code Playground

by Nhi Nguyen

JavaScript

function create_bindings() {
            stage.bind('mouseenter', function(e) {
                handle_image_hover(e, this);
            }).bind('mouseleave', function(e) {
                handle_image_out(e, this);
            }); 
            play_pause.bind('click', function(e) {
                handle_control_click(e, this);
            });
            prev.bind('click', function(e) {
                handle_prev_click(e, this);
            });
            next.bind('click', function(e) {
                handle_next_click(e, this);
            });
            start.bind('click', function(e) {
                handle_start_click(e, this);
            });
            end.bind('click', function(e) {
                handle_end_click(e, this);
            });
            fullscreen.bind('click', function(e) {
                handle_fullscreen_click(e, this);
            });
            scrubber.bind('click', function(e) {
                handle_scrubber_click(e, this);
            });            
        }
        
        function set_image(img) {
            var w = (full === true) ? $(window).innerWidth() : settings.stageWidth;
            var h = (full === true) ? $(window).innerHeight() - 40 : settings.stageHeight;
            var image_object = {
                src: img, 
                alt: 'Slide ' + i + 1, 
                width: w, 
                height: h
            };
            if (image === null) {
                image = $('<img>').attr(image_object);
                stage.append(image);
            } else {
                image.attr(image_object);
            }
            set_caption(i+1);
            frame_count.html(i+1 + '/' + images.length);
        }
        
        function set_caption(frame) {
            if (settings.captions === null || !(frame in settings.captions)) return;
            caption.html(settings.captions[frame]);
        }
        
        function image_cycle() {
            clearTimeout(rotator);
           ...