JSFiddle - React, Tailwind, and code Playground

by lbstr

JavaScript

$(function() {
            var $tf_bg              = $('#tf_bg'),
                $tf_bg_images       = $tf_bg.find('img'),
                $tf_bg_img          = $tf_bg_images.eq(0),
                $tf_thumbs          = $('#tf_thumbs'),
                total               = $tf_bg_images.length,
                current             = 0,
                $tf_content_wrapper = $('#tf_content_wrapper'),
                $tf_next            = $('#tf_next'),
                $tf_prev            = $('#tf_prev'),
                $tf_loading         = $('#tf_loading');
                            
                        
            //preload the images                
            $tf_bg_images.preload({
                onComplete  : function(){
                    $tf_loading.hide();
                    init();
                }
            });
                        
                        
            //shows the first image and initializes events
            function init(){
                //get dimentions for the image, based on the windows size
                var dim = getImageDim($tf_bg_img);
                //set the returned values and show the image
                $tf_bg_img.css({
                    width   : dim.width,
                    height  : dim.height,
                    left    : dim.left,
                    top     : dim.top
                }).fadeIn();
                
                //resizing the window resizes the $tf_bg_img
                $(window).bind('resize',function(){
                    var dim = getImageDim($tf_bg_img);
                    $tf_bg_img.css({
                        width   : dim.width,
                        height  : dim.height,
                        left    : dim.left,
                        top     : dim.top
                    });
                });
                        
                // MY ANSWER!!!!!!!!!!
                // Click next every 5000 ms (5 sec). 
                setInterval(function(){
 ...