Skip to main content

Using Slideshows in Flex Block

Updated

You can add dynamic Slideshows to flex block sections to add motion and visual interest to your Custom Pages.

Adding Slideshows to flex block sections

To add a Slideshow to a flex block section, you will first need to add a flex block to a Custom Page. If you aren't sure how to do this, please see our Flex Block overview article.

Once you have added a flex block to your Custom Page, you can select Slideshow from the element selector:

  1. Add Element +: Click Add Element to display a list of flex block elements
  2. Slideshow: Select Slideshow to add a Slideshow element to your flex block

Slideshow design options

After adding a Slideshow section to your flex block, it will appear with placeholder images, which you can replace with your own: 

  1. Upload Images: Upload images to your Slideshow section. This works the same way as uploading images anywhere else on your site. You can have up to 40 images in a single slideshow
  2. Slideshow Options: Design options for your Slideshow section
  3. Manage Images: Manage the images in your Slideshow section. As no images have been uploaded yet, this cannot be accessed
  4. Layer Positioning: Adjust the positioning of your slideshow in relation to other elements in your flex block section, where overlapping elements may be a concern
  5. Duplicate: Duplicate the Slideshow
  6. Delete: Delete the Slideshow

After uploading a few images, you can make design changes to your Slideshow by clicking Slideshow Options (Numbered point 2 in the previous screenshot):

  1. Manage Images: Rearrange images and choose focal points for them
  2. Slideshow Layout: Currently, Slideshows can only be full width. However, you can still resize Slideshow sections the same way you would resize any other flex block element
  3. Navigation Options: 
    1. Show Navigation Arrows: Toggle navigation arrows and choose where they appear
    2. Crop Ratio: Choose between Fill or Fit
    3. Show Image Counter: Display a numbered counter of images in your slideshow and current image position
    4. Navigation Color: Choose a color for your Slideshow's navigation arrows (if enabled)
  4. Visual Effect Options: 
    1. Show Thumbnails: Display thumbnails of images in your Slideshow beneath the Slideshow
    2. Loop: Allow the Slideshow to loop and restart upon reaching the final image
    3. Enable Autoplay: Allow the Slideshow to advance on its own, without visitor interaction
    4. Transition Effect: Choose between Slide and Fade

If you select Manage Images, you will be presented with the following set of options:

  1. Upload Images: Upload more images to your Slideshow section
  2. Focal Point: Choose a focal point for your images, this is helpful if you have selected the Fill crop ratio and want to ensure that images are centered around a specific detail of the image
  3. Adjust Position: You can click and drag images to reorder them, by clicking and holding on the small set of dots in the lower-left corner of the image
  4. Delete Image: You can delete images from your Slideshow

Mobile editing

Mobile view editing for Slideshows works in the same way as any other flex block element. For a comprehensive guide, please see our Flex Block overview article.

  1. View Selector: Switch between desktop and mobile editors. Some design options may be limited in mobile view due to feedback limitations of mobile devices

Still have questions? Reach us on our live chat or email us at info@format.com. We’re here to help!

Related to

Related articles