Ask a Question ?
Design & Publish Websites Faster

How the Slideshow App Works

How the Slideshow App Works

What You’ll Learn

In this article you will learn how to set up a Slideshow app. This app is meant to have a succession of sliding images for showcase.

Steps to Set Up a Slideshow App


1. First, log in to your site, and go to the shelf > Apps and locate Slideshow. App Store menu, showing the Banner app 2. Click (and drag) the “Install New” button. Release it in a container of your choice. Drag and drop the Slideshow app into a column or Then, once the app loads, you will see a series of sample default images sliding to the left every 6 (or so) seconds. The initial count for these sample images is 3, but you can add or remove items as you need. We’ll get to that in a minute. Slideshow sample images

Update Images

3. To change one of these sample images, double click on it. You’ll notice a green overlay highlighting the image when you hover it. Hover over an image to highlight it, and click to open edit window 4. The image-editing window will open. Here you can do some resizing or cropping, or add a value for the alt attribute. To replace the image click the “Replace” button. Edit image window, to change the image: click on "Replace" 5. From the dialog box that appears, you can select an image file from your computer, or enter a web URL. And click “Save”. Select a file from your hard drive or a public URLYou can repeat steps 3, 4 and 5 for updating the rest of the images.

Reorder Items

6. If you want to change the order in which they appear, click the “Reorder” button, located at the bottom right area of the app. Reorder slideshow items 7. A modal window will open, with a list of the items you currently have. Mouse over each item and notice a light-green overlay highlighting them, and your mouse pointer changing into a four-directional arrow. To change the order, drag and drop an item to the desired position: Then click “Close” on the top right. Reorder-items window

Add More Entries

8. Now, if you want to add another image, besides the 3 you currently should have, go to the app toolbar, and locate the icon with a page and a plus sign. Click it, and another image will be added to your slideshow. Click the top left icon to add entries

Remove Items

9. On the other hand, if you have too many items or want to delete one of them, click on the “X” on the lower right. Doing so will delete the currently-showcased image. If you want to delete another one, you’ll have to wait until it’s shown. Click on the X to remove current image

App Settings

10. And lastly, the options. To open them, click on the wrench icon, located on the app toolbar. Click on "Edit Settings" button to open up the options panel 11. The following options are available, as shown in the image below. Options window for the Slideshow app

  • Stay on Image For (Seconds). Here you will enter a number in seconds for an image to remain visible before the next one slides/fades in.
  • Fading Speed. This option sets how fast you want the transition to be made.
  • Effect. You have two options: slide and fade.
  • Propagate Style To All Pages. Selecting this checkbox will copy the styles of current app to all the pages where that same app version is installed. Styles include margins and padding, borders, drop shadow, etc.

And that’s basically it. Try the Slideshow app in your site today, and showcase one or several sets of images! If there’s something not covered here, let us know in the comments below!