Splider Image slide type

Avatar

By Stuart Marshall

updated 5 months ago

Splider has its own image stack that is designed to work with Splider.

Settings

You can opt to add a custom class name(s) if you want to target this particular slide with some custom css.

You can opt to add either a warehoused image (by providing a url) or a local image by simple dragging and dropping.

You can also opt to add an alt tag for the image.

There is an option to lazy load the image. Lazy loading is a great option if you have a lot of image slides and do not want them all to load immediately. Lazy loading them will mean that they only get downloaded if/when they are needed.

If you enable the Lazy Load option then you must also select a Lazy Load 'mode' in the parent Splider stack. If you do not do this then the image will not show in Preview Publish modes.

In addition, the slide stack itself allows you to add a link to the slide. This option makes the full slide a link that you can use to link to any url. 

Tips

There are some settings in the parent stack that are particularly useful when using Image slides. Especially if you want all of your images to appear at the same size...

Height or Height ratio: You can use either of these options to set a consistent height for the slides. The default behaviour is for the slide content to dictate the height of the slide. If you are using different images of different sizes then the images will be displayed at these different sizes. One option is to edit all the images to be the same size / aspect ratio outside of RapidWeaver or you could enable 'Cover mode' which will make sure your images all fill the available space set.




Did this answer your question?