Can't Figure Out how to Call Unite Gallery (External Plugin)

[CoveOfMadness]

I have stared at the source code for your demo for ages, and I still cannot figure out how to call to the external plugin I would like to use for my slideshow content. The unite gallery works on the page so long as it is outside a gridder content div, so I know it isn't a problem with how I have unite gallery set up.

Here is what I have, including the script for the Unite Gallery I am trying to call:

 <script src="gridder/dist/js/jquery.gridder.js"></script>
  	
<script type="text/javascript">
				
				jQuery(document).ready(function(){
					
					jQuery("#gallery").unitegallery({
						gallery_theme: "slider",
						gallery_width:"60vw",							//gallery width		
					gallery_height: "80vh",							//gallery height
	gallery_autoplay:false,		
						gallery_carousel:true,						//true,false - next button on last image goes to first image.
	
					gallery_preserve_ratio: true,	
						slider_scale_mode: "down",	
						slider_item_padding_top: 0,					//padding top of the slider item
					slider_item_padding_bottom: 0,				//padding bottom of the slider item
					slider_item_padding_left: 0,				//padding left of the slider item
					slider_item_padding_right: 0,
						slider_enable_progress_indicator: false,	
						gallery_background_color: "red",
					});
				});
				
				</script>      
                           

<script>
            jQuery(document).ready(function ($) {

                // REMOVE AND ADD CLICK EVENT 
                $('.doAddItem').on('click', function () {
                    $(".gridder").data('gridderExpander').gridderAddItem('TEST');
                });

                // Call Gridder
                $(".gridder").gridderExpander({
					 nextText: "<span></span>", // Next button text
                    prevText: "<span></span>", // Previous button text
                    closeText: "<span></span>", // Close button text
                    scrollOffset: 60,
                    scrollTo: "panel", // "panel" or "listitem"
                    animationSpeed: 400,
                    animationEasing: "easeInOutExpo",
                    onStart: function () {
                        console.log("Gridder Inititialized");
                    },
                    onExpanded: function (object) {
                        console.log("Gridder Expanded");
                    },
                    onChanged: function (object) {
                        console.log("Gridder Changed");
                    },
					onContent: function () {
                        //Gridder Content Loaded
                        console.log('On Gridder Expand...');
                        $('.unitegallery').unitegallery();
                    },
                    onClosed: function () {
                        console.log("Gridder Closed");
                    }
					
                });
            });
        </script>

Thank you for any help you can give, my ability to code is entirely copy/paste and then trial and error, and that just doesn't cut it for me this time since I just can't seem to find the context you're calling carousel from in your example.