How to Create a Looping HTML Slideshow with InDesign and in5

Justin | articles,design,HTML5 | Monday, February 20th, 2017

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

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

Splittext_id_400px

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

Unsubscribe at any time. Powered by ConvertKit

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *