Create a Custom Image Slider in Rise with Mighty

Rise 360 is great for clean, fast course builds, but sometimes you need an interaction that isn’t in the native block library. A custom image slider is a perfect example: useful, visual, and not something you want to rebuild from scratch when you’re on a deadline.

How to Make a Custom Image Slider in Articulate Rise

With Mighty’s Interactive HTML block, you can bring a standalone HTML, CSS, and JavaScript interaction directly into your Rise course. In this walkthrough, we use a free CodePen carousel, swap in our own images, and upload the finished ZIP into Rise.

What you’re building#

In the tutorial, Mighty developer John Pinkster uses a responsive slideshow from CodePen and places it inside a Rise lesson using Mighty’s Interactive HTML block.

Here’s an overview of his process:

1. Find a standalone HTML slider (John found his on CodePen).
2. Export it as a ZIP.
3. Confirm it works locally.
4. Upload it into Rise with Mighty.
5. Replace the default image URLs with your own local images.
6. Re-zip the files and upload the final version.

Mighty needs a standalone interactive with an index.html file at the root level of the ZIP. If the HTML, CSS, JavaScript, and images are packaged correctly, Rise can display the interaction right inside the course.

Why use an HTML slider instead of Storyline?#

You could build a carousel in Storyline and embed it in Rise. That’s a familiar route for many teams.

But if your goal is a lightweight image slider, using a standalone HTML interaction can be faster and cleaner. You don’t need to open another authoring tool, publish a Storyline block, or manage a separate source file just to show a few images in a more polished way.

This is especially helpful when you’re working with:

• Product images or feature highlights
• Before-and-after examples
• Visual case studies
• Scenario images
• Portfolio-style course sections
• Branded campaign visuals

Native Rise has image blocks, galleries, carousels in some interaction types, and process-style layouts—but it doesn’t give you complete control over a custom responsive slider. That’s where Mighty’s Interactive HTML block opens the door.

Step 1: Find an image carousel on CodePen#

Start by searching for an image carousel or slideshow on CodePen. In the video, John uses a responsive slideshow found through a simple Google search.

CodePen is a site where developers share HTML, CSS, and JavaScript examples. Many pens are free and open to inspect, which makes it a useful place to find small standalone interactions. You can also check out the Mighty Code Catalog for custom code snippets shared by other Mighty users.

When you’re choosing a slider, look for one that:

• Already behaves the way you want
• Is responsive
• Uses standard HTML, CSS, and JavaScript
• Doesn’t rely on a complex external setup
• Has a visual style that fits your course, or is close enough to adjust

Step 2: Export the CodePen as a ZIP#

Once you’ve found the carousel you want, create or sign into a free CodePen account. That gives you the option to export the pen.

In CodePen:

1. Open the carousel pen.
2. Look for the export option.
3. Choose Export .zip.
4. Save the ZIP somewhere easy to find, like your desktop.
5. Unzip the file.

Inside the exported folder, look for the dist folder. That’s where the working files live.

Open the dist folder and launch index.html locally in your browser. This is a quick quality check before you upload anything to Rise.

If the carousel works locally, you’re ready to package it for Mighty.

Step 3: Zip the files the Mighty-friendly way#

This part is essential.

You don’t want to zip the outer folder in a way that buries index.html one level too deep. Mighty needs index.html at the root of the ZIP.

Inside the dist folder:

1. Select all the files.
2. Right-click.
3. Choose Compress.
4. Create the ZIP archive.

When that ZIP is opened, index.html should be immediately visible at the top level.

Step 4: Upload the ZIP into Rise with Mighty#

Now head back to your Rise course.

In the lesson where you want the carousel:

1. Add Mighty’s Interactive HTML block.
2. Replace the default ZIP with the ZIP you just created.
3. Let the upload finish.
4. Preview the block in Rise.

In the video, the CodePen slideshow loads directly inside the Rise course and works as expected.

From there, you can adjust the block settings. John removes the border, turns on Match to height, and changes the background color to use the course theme color.

Those little presentation settings make a difference. The interaction should feel like it belongs in the lesson—not like a random web object dropped into the middle of the page.

Step 5: Replace the default images#

At this point, the carousel works, but it still uses the images from the original CodePen.

In the example, the slideshow is pulling remote images from Static Flickr. If your images are already hosted somewhere, you could replace those URLs with your hosted image URLs.

However, it’s probably safer to use local images inside the ZIP. That way, the images travel with the course package. You’re not depending on your learners’ internet connection or a third-party image URL staying live.

To add local images:

1. Open the dist folder in a code editor. John uses VS Code.
2. Create a new folder called images.
3. Add your image files to that folder.
4. Rename them in a simple, consistent way.

In the video, the images are named:

• image1
• image2
• image3

The benefit of simple names is that future replacements are easier. If you later want to swap the visuals, you can replace the files while keeping the same filenames, instead of editing the HTML again.

Step 6: Update the image sources in the HTML#

Now open index.html in your code editor and find the existing image sources.

In the original CodePen, those sources point to remote image URLs. Replace them with paths to your local images folder.

The updated paths in the video follow this structure:

images/image1
images/image2
images/image3

Depending on your actual file names and extensions, your paths may include .jpg, .png, or another image format. The important part is that the path matches the folder and file name exactly.

Because the original slideshow had five images and the example only uses three, John also removes the extra HTML for the unused slides.

That includes cleaning up:

• Extra article elements for slides that no longer exist
• Extra labels
• Extra dots
• Extra radio inputs

This is a small but important cleanup step. If the slider’s controls still expect five slides, but you only provide three images, you can end up with broken navigation or empty states.

After editing, save the file and open index.html locally again. Click through the slider and confirm everything still works.

Step 7: Re-zip and re-upload the finished slider#

Once your local version looks right, package it again.

Inside the dist folder:

1. Select all files and folders, including your new images folder.
2. Right-click.
3. Choose Compress.
4. Create the new ZIP archive.

Then go back to Rise and replace the existing ZIP in the Interactive HTML block.

After upload, your custom images should appear inside the Rise lesson. In the video, the final slider displays the three local images directly in Rise.

A quick note on image size#

John mentions that the images he uploaded were “fairly large,” but they still loaded.

That’s fine for a demo. For a real course, it’s worth resizing and compressing your images before you package the interaction. Large images can make your course heavier, slow down lesson loading, and create a rougher experience for learners on slower connections.

A few practical habits:

• Resize images to the largest size they’ll actually display.
• Compress them before adding them to the ZIP.
• Keep filenames simple and predictable.
• Test the Rise lesson after upload, not just the local HTML file.

Accessibility and brand considerations#

Any time you bring custom HTML into a Rise course, you’re also taking responsibility for how that interaction behaves.

Before you use a CodePen slider in production, check the basics:

• Can learners navigate it with a keyboard?
• Are controls visible and understandable?
• Does the text have enough contrast?
• Are images decorative, instructional, or essential?
• If the images communicate important meaning, is that meaning available elsewhere in the lesson?

Also look closely at styling. A carousel that looks great on CodePen may need small adjustments to match your Rise theme, brand colors, spacing, or tone. In the video, the slider already matched the course style well, and the Rise block settings helped it blend in further.

What Mighty is doing here#

Mighty isn’t generating the carousel in this workflow. The carousel comes from standalone HTML, CSS, and JavaScript.

What Mighty unlocks is the ability to place that standalone interaction into Rise using the Interactive HTML block. Once the ZIP is uploaded, the interaction is embedded into the course—and because the local images are included in the package, they travel with it.

Rise doesn’t natively let you drop in any custom HTML interaction as a standard block. Mighty gives you a practical way to do it without sending the whole project out to a developer for every small interactive idea.

And if you do need something more custom, you still have options: work with your internal development team, contract a developer, or partner with a team like Maestro to build a purpose-fit interaction.

👉 If you want to learn more about coding for learning design—including how to create custom interactions and work more effectively with AI tools—check out Code School, our self-paced, on-demand coding course.