Infinite horizontal scroll

Simulate an infinite slideshow

Simulate an asynchrone loading

$(function(){
    $('.slideshow').jocodeSlideshow({
        
        selector : '> .scroller > div > div',
        
        //define manually the container to support, on hover event, the loader element
        hover_container : '.loader,.scroller',
            
        bt_first : '.first',
        bt_previous : '.previous',
        bt_play : '.play',
        bt_pause : '.pause',
        bt_resume : '.resume',
        bt_stop : '.stop',
        bt_next: '.next',
        bt_last : '.last',
        
        disabled_bt_class : 'disabled',
        
        auto_play : true,
        delay : 1000,
                   
        start_index : 0,
       
        fx : new $.JocodeFxSlideshow.HorizontalScroll({
            duration : 1000
        }),
        
        navigation : new $.JocodeNavigationSlideshow({
            
            selector : '> .navigation > div > .scroller > div >  a',
            
            selected_class : 'selected',
            scrolled_class : 'scrolled',
            
            bt_next: '.scroll_next',
            bt_previous : '.scroll_previous',
            bt_first: '.scroll_first',
            bt_last : '.scroll_last',
            
            fx : new $.JocodeFxNavigationSlideshow.HorizontalScroll({
                scroll_over : true
            })
        }),
        
        //simulate an loader...
        load : function(){
            
            var self = this,
                index = this.loading_index;
            
            $('.loader', this.context).show();
            
            setTimeout(function(){
                
                if(!self.isCanceled(index))
                    self.draw();
                
            }, 1000);
        },
        
        beforeDraw : function(){
            //console.log('beforeDraw');
            $('.loader', this.context).hide();
        },
        onCancel : function(canceled_index){
            console.log('onCancel');
        },
        onPlay : function(){
            console.log('onPlay');
        },
        onPause : function(){
            console.log('onPause');
        },
        onResume : function(){
            console.log('onResume');
        },
        onStop : function(){
            console.log('onStop');
        },
        
        //simulate an infinite slideshow
        onChange : function(new_index){
            
            console.log('onChange');
            
            var self, i, div, a;
            
            if(!this.hasNext()){
                
                this.pause();
                
                self = this;
                
                setTimeout(function(){
                    
                    for(i = 0; i < 10; i++){
                    
                        div = document.createElement('div');
                        div.innerHTML = "";

                        self.container[0].appendChild(div);

                        a = document.createElement('a');
                        a.href = '#';
                        a.innerHTML = "Nav1";

                        self.navigation.container[0].appendChild(a);
                    }
                    
                    self.initPile();
                    self.resume();
                    
                }, 1500);
            }
        },
        
        beforeWait : function(delay, elapsed, start_time){
            console.log('beforeWait');
        }
    });
});