How to Create a Looping HTML Slideshow with InDesign and in5

In this article, I’m going to show you how to create a self-running slideshow using Adobe InDesign and in5 (InDesign to HTML5).

This will let you create animated slideshows that will run in any browser, using content you’ve created in InDesign.

This type of slideshow has many possible uses, including

• web banners
• tradeshow presentations
• animated info graphics

This article shows you how to create a dynamic HTML5 banner ad using InDesign. You can also create an animated GIF using the same techniques.

There are only a few steps to creating a self-running slideshow…

The Basics

1. Create your slides as InDesign pages.

2. Create a text file with your slideshow settings and save it with a .js extension (detailed below).*

3. Choose File > Export HTML5 with in5… and choose the Slider (Fade in) Page Format.
   (Optional: Turn off Show Back/Next Arrows.)

4. Before exporting, go the Resources section, and attach the .js file you saved.

5. Export.

You now have a self-running slideshow.

Tradeshow Tip

You can also combine the settings about with the iPad Web App output option to create a fullscreen, self-running slideshow that could play at a trade show booth.

Learn more about Web Apps.

Live Example

Here’s a self-running slideshow created with InDesign and in5.

The animation was built in InDesign, too.

*The Custom Code

in5 lets you apply custom code to your output.

There are tons of samples on this site, so you don’t have to be a coder to take advantage of these customizations.

Here’s the code that was used to create the slideshow above.
sliderSettings = {
autoPlay:true, /*enable slideshow*/
stopAtEnd:false, /*loop*/
delay:7000 /*7 secs per slide*/
};


What will you create?

If you have tried the in5 yet, get the free trial now to start building slideshows and other digital content from the comfort of Adobe InDesign.

✕

Get updates from Ajar Productions

Sign up today and get the InDesign Split Text premium extension for free!

Success! Check your email to confirm your subscription and get your reward.

There was an error submitting your subscription. Please try again.

First Name

Email Address

We use this field to detect spam bots. If you fill this in, you will be marked as a spammer.

I'd like to receive the free email course. Subscribe & Get My Extension Unsubscribe at any time. Powered by ConvertKit