image
image

ICONIC

A Source PLUS project

Showcasing the use of Iconic stack from Instacks with Source 'micro' framework AND Splider!

Note: There is a Splider stack in this header section to provide a background slideshow. Pause here for a moment to see this silky transition take place!!

Single image slider

Here we are setting an aspect ratio is Splider of 16:9 so that all images are displayed consistently. We are also making use of Splider's caption styling options to control the look and feel of the captions.

Single image slider (with faded overflow)

This Splider stack has the exact same settings as the example above but this time we are allowing the overflow to be visible and to have those additional visible slides faded. We have set the caption to only show when the slide is active.

Multiple images

Here we have set Splider to show multiple slides at one time (3 on large devices, 2 on medium and 1 on small). We have also added in an additional slide at the start of the slideshow to introduce it - this manually created slide gets combined with the image slides generated by Iconic!

watering-plants

Plant images

This is our gallery of images relating to plants. Use the arrows to navigate through and if you want to see any in more detail simply click on it to zoom in!

Fade transition

Instead of having the images slide in each time we have set the option to fade them in. Click through these to see how silky smooth the effect is. Additionally we have adjusted the position of the captions and the pagination indicators in this example!

Note: Another example of the fade transition is used in the Header section of this page (where it forms a background slideshow that autoplays)!

Autoscroll

In this example we have enabled autoscroll so that the images progress in a steady stream without any interaction from the user. The autoscroll pauses when hovered over and the caption is displayed at that point too. In addition we have set the 'drag mode' to free which gives a really smooth interaction (try grabbing the images below and sliding/flicking them along to see the effect!).