Create a new Maven project with the following structure:

Edit pom.xml file:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance"

    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

    <modelVersion>4.0.0</modelVersion>

    <groupId>sample</groupId>

    <artifactId>gadget</artifactId>

    <packaging>war</packaging>

    <version>1.0</version>

    <name>Auto slideshow gadget sample</name>

    <build>

        <finalName>auto-slideshow</finalName>

    </build>

</project>

Edit web.xml file:

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="3.0" metadata-complete="true"

    xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">

    <display-name>auto-slideshow</display-name>

</web-app>

Edit AutoSlideshowGadget.xml file:

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

  <ModulePrefs title="Memories!" width="240" height="200"/>

  <Content type="html">

  <![CDATA[

  <!--Gadget's main body which will be added by HTML DOM Object later-->

  <div id="slideshow">

  </div>

  ]]>

  </Content>

</Module>

in which you name the gadget as Memories!. The main body consists of a div tag only. This file will be updated later.

Download http://code.jquery.com/jquery-3.2.1.js and save it in webapp/gadgets/AutoSlideshowGadget/.

Edit style.css file:

img {width: 240px;

}

#slideshow { 

 margin: 10px auto 10px; 

   position: relative; 

   width: 240px; 

 height: 200px; 

    padding: 10px; 

    box-shadow: 0 0 20px rgba(0,0,0,0.4); 

}

#slideshow > div { 

   position: absolute; 

   top: 10px; 

    left: 10px; 

   right: 10px; 

  bottom: 10px; 

}

Edit myscript.js file. This script contains a function using AJAX to call DriverConnector API (see here for more details) to get all public images of root user. Another function, the traverseXMLDoc function will be added in next steps.

function getImages() {
	//This function uses AJAX to send GET request to server's DriverConnector API and receive XML response
	jQuery.ajax({
		type: "GET",
		url: "/portal/rest/wcmDriver/getFoldersAndFiles?driverName=Collaboration&currentFolder=Users/r___/ro___/roo___/root/Public&currentPortal=intranet&repositoryName=repository&workspaceName=collaboration&filterBy=Image",
		contentType: "application/xml; charset=utf-8",
		dataType: "xml",
		success: function (data, status, jqXHR) {
			var strResults=new XMLSerializer().serializeToString(data.documentElement);
			//build dynamic html content for "slideshow" div tag
			traverseXMLDoc(strResults, "slideshow");
		},
		//error report
		error: function (jqXHR, status) {
			//error handler
			alert("Cannot retrieve data!");
		}
	});
}

Add the traverseXMLDoc function with 2 input parameters to this script as follows:

function traverseXMLDoc(xmlDoc, idOfContainerDomElement){
	//This function traverses through the whole XML response returned from server
	var $xmlDocObjChildren, $contentDiv;
	$contentDiv = $('#' + idOfContainerDomElement);
	if ($contentDiv.length === 0) {
		throw new Error('There are no DOM elements with this id: "' + idOfContainerDomElement + '"');
	}
	//Information of each image object is contained in "File" tag
	$xmlDocObjChildren = $(xmlDoc).find("File");
	$xmlDocObjChildren.each(function(index, Element) {
		var	$currentObject = $(this),
				childElementCount = Element.childElementCount,
		//Image's url is contained in "url" attribute
		currentNodeType = $currentObject.attr('url');
		//Adding dynamic content into gadget's body
		$contentDiv.append('<div><img src="'+currentNodeType+'"></div>');
	});
}

Add some image effects by JavaScript and include all your created resources to the AutoSlideshowGadget.xml file:

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

  <ModulePrefs title="Memories!" width="240" height="200"/>

  <Content type="html">

  <![CDATA[

  <script src="jquery-3.2.1.js"></script>

  <script src="myscript.js"></script>

  <link rel="stylesheet" type="text/css" href="style.css" />

  <!--Gadget's main body which will be added by HTML DOM Object later-->

  <div id="slideshow">

  </div>

  <!--Start calling js function-->

  <script type="text/javascript">

    getImages();

    //Creating gagdet's effects

    $("#slideshow > div:gt(0)").hide();

    setInterval(function() { 

      $('#slideshow > div:first')

        .fadeOut(1000)

        .next()

        .fadeIn(1000)

        .end()

        .appendTo('#slideshow');

    },  3000);

  </script>

    ]]>

  </Content>

</Module>

Notice that you can follow this section to create CSS and Javascript resources in separate files to share with other gadgets. In this guide, we make it simple by including these resources right inside the war package.

Edit gadget.xml file:

<gadgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="http://www.gatein.org/xml/ns/gatein_objects_1_0 http://www.gatein.org/xml/ns/gadgets_1_0"

    xmlns="http://www.gatein.org/xml/ns/gadgets_1_0">

    <gadget name="AutoSlideshowGadget">

        <path>/gadgets/AutoSlideshowGadget/AutoSlideshowGadget.xml</path>

    </gadget>

</gadgets>

Deploy the gadget and add it to Root's user dashboard. If necessary, see Creating a gadget for how to.

Log in as Root, upload several images into Documents → Public.