Iconic gallery
Iconic gallery allows you to link your page to folders on your server that hold your images. There are various options in the stack to then display the images on your page. In addition you can optionally set the images to display captions and to open in a lightbox.
Splider stack is one of the possible display options and allows you to access all of the amazing Splider features to display your images.
Setting up Iconic gallery as the slide type
If you own Iconic gallery stack then one of the slide type options in Splider 2 becomes 'Iconic Gallery'
Selecting Iconic Gallery adds that stack inside Splider and allows you to connect to your image source as standard.
To then set Iconic to generate Splider slides simply select the 'Splider integration' option from the 'Layout' setting in Iconic stack.
Other settings that you need to configure in Iconic is whether you want to display captions in the slides and whether you want to enable the Iconic lightbox functionality.
Finally, you can select whether Splider uses the thumbnail version of the Iconic image or the full image version (the default is to use the full image). You may for example want to just use the small images when you are displaying multiple slides on the page at one time. Note: The full version will still be accessed if the lightbox option has been enabled.
Setting up Splider stack
Simply set your desired slider settings and stylings as you normally would. All options (apart from a couple of limitations detailed at the bottom of this page) are available to you when using the Iconic integration.
Display settings
If your images are various sizes / aspect ratios then you will most likely want to standardise the display of these by controlling the height of the slider. I would recommend the following settings - depending on whether you are opting to display a single image or multiple images at one time:
Single images: For single images I would recommend using Splider's 'Height ratio' setting in Splider 2 stack.
Multiple images: If displaying multiple images 'per page' then I would recommend using a fixed height by adding the desired value into the 'Height' setting in Splider 2 stack.
IMPORTANT: For either of the above methods to work properly please ensure that you check the 'Enable cover mode' option in the Image
Note: You can select different heights / height ratios for different devices by enabling additional breakpoints in Splider stack.
Lazy load
A key setting that you will most likely want to enable is to select a Lazy load mode. If you do this then all of the Iconic images will be lazy loaded by Splider stack.
Captions
If you enable captions in Iconic stack then these will be displayed in Splider stack. You can position and style these using the 'Caption styling' child stack in Splider.
Multiple galleries / sliders
IMPORTANT: If you are using the Splider / Iconic integration more than once on a page (or if you are using the Iconic integration with Splider and additional regular Splider stacks) then you need to ensure that you set a unique Splider ID for each instance of Splider (in the 'Advanced' setting section of Splider 2 stack).
Limitations
The Grid and URL hash Splider extensions will not work.
If using the Autoscroll extension you will need to set it to be activated with the Intersection extension - which will trigger the autoscroll to start when the slider comes into view.
Demo file
A Source Plus demo file is available that showcases using Iconic with Splider (and with Source).
