Tutorial - Dynamic Multi-Image Slider

This tutorial will give you the ability to have a slider with the amount of slides based on the amount of images placed in the Multi-Image field.
You will be able to design the slider the way you like it.

Keep in mind, a Multi-Image field can be used only in CMS Collection Pages.

1

To get started (assuming you have already a collection with a Multi-Image field).
Place a Slider from the Elements panel.
Give the Slider the ID  MultiImageSlider

2

Set a background image to a Slide, set to Cover and Position Center (Don't choose any image yet).

3

Duplicate the slide to have 25 times. (a slide for each potential image in the Multi-Image field, the custom code will later delete the unnecessary slides).
‍

‍We are now done with the Slider.

4

Place a Collection on the page (this Collection will be visible only in the Design mode, and be hidden on the published site, the purpose of this Collection is to place the images on the page, the custom code will take each image and place it on a slide).

Bind the Collection to the Multi-Image field.

5

Give the Collection wrapper the ID: MultiImageCollectionWrapper

6

Set a background image for each "collection item" to be inherit from the Multi-Image field.

If your page looks similar to this than you're almost there, the only thing missing is to paste the custom code that makes the magic happen!

Now for the fun part.

7

Copy this code:

Paste the code into the Body of the page:

Done!

Click Save. Publish the site and go watch the magic in the live website :)

Bonus: This code will remove the left / right arrows and the slider nav if there's only one image in the Multi-Image field.

Don't hesitate to contact me here if you have any difficulties.