[Image slider help]

Hi all

 

I am new to this forum and am trying to modify the masonary gallery so that it displays the images in a slideshow but I'm having real problems.  Go easy on me I'm a newbie!  So my first approach is this but it doesn't work

 

My second approach would be to upload a slider.js .  I tried uploading the file to the widget but I can't so where do I upload it?

 

widget.js

Com.Frog.Controllers.Widget.extend('Widget.Carousel', {
    }, {
        prefs: {
            selectFolder: {
                type: "sharedfolder",
                defaultValue: "|"
            }
        },

        packageID: '5974C4D12001B59B10329F5A6600A10004F91B0C18A6DDA8',
        /**
         * Constructor. Runs when the widget is first loaded.
         *
         * @method init
         */
        init: function() {},

                /**
         * Event fired by the Site Controller.
         *
         * @event 'widget.live'
         */
        'widget.live': function(el, ev, data) {
            this.element.html(
                this.view('main.ejs')
            ); 
           var selectedFolderUUID = this.prefs.selectFolder.value;
           selectedFolderUUID = selectedFolderUUID.substring(0, selectedFolderUUID.indexOf('|')); 
            
            if (selectedFolderUUID !== '') {
                                    
                    Frog.Model
                        .api('resources.getOfType', {
                            sources: ["native","site"],
                            type: 'personal',
                            author: 'true',
                            root_folder: 'EDAAA0E92002F81B92C2DFCD917CAC05E532634CEE5FEBD9',
                            folder: selectedFolderUUID,
                            filter: null,
                            exclude_templates: 'true'
                        }).done(function(response) {
                         var fileArray = $.map(response.data.resources, function(el) { return el; });
                        
                            $.each(fileArray, function(index, value){
                                if (value.attachment.file.mime.type === 'image') {
                                    var newImg = $('<div class="img-item ' + '" data-image-title="' + value.attachment.name + '" data-updated-at="' + value.attachment.updated + '">                              <img src="file/asset/' + value.uuid + '.' + value.attachment.file.mime.ext + '?height=800&width=800&scale_mode=fill"></div>');
                                    thisElement.find('.slide').append( newImg );
                                }
                            });

                                
                                
                        $('#right-arrow').click(function() {
                        var currentSlide = $('.slide.active');
                        var nextSlide = currentSlide.next();
    
                        currentSlide.fadeOut(3000).removeClass('active');
                        nextSlide.fadeIn(3000).addClass('active');    
    
                        if(nextSlide.length == 0) {
                        $('.slide').first().fadeIn(3000).addClass('active');
                        }    
                        });

                        $('#left-arrow').click(function(){
                        var currentSlide = $('.slide.active');
                        var prevSlide = currentSlide.prev();
    
                        currentSlide.fadeOut(3000).removeClass('active');
                        prevSlide.fadeIn(3000).addClass('active');    
    
                        if(prevSlide.length == 0){
                        $('.slide').last().fadeIn(3000).addClass('active');
                        }    
                        });        
        },

          main.ejs

 

 <div class="content"> 
<div id ="slide">
   <div class="slide"></div>     
        
    </div>
    
    <p id ="left-arrow"> Next </p>
    <p id="right-arrow"> Prev </p>
</div>

 

 

Thanks in advance for your help.