Slideshow

Overview #

The Slideshow section is designed to create flexible and dynamic slideshows that can incorporate various types of content blocks. This section is ideal for showcasing images or banners and can be customized to include different block types, providing a versatile tool for enhancing visual storytelling on your site.

Key components and functionality #

Column count settings

These settings allow you to define how many columns are displayed in the Slideshow on different devices, ensuring optimal layout and readability.

• Desktop column count: Set the number of columns for desktop view. The default is 4.
• Tablet column count: Set the number of columns for tablet view. If set to 0, the desktop setting will be used. The default is 0.
• Mobile column count: Set the number of columns for mobile view. The default is 1.

Layout and content settings

These settings control how content is displayed and interacted with across different devices.

• Stack on mobile: Enable this option to stack items vertically on mobile devices.
• Stretch content vertically: When enabled, blocks will stretch to match the height of the tallest block in the row.

Animation and autoplay settings

These settings define the visual transitions and timing for the Slideshow, enhancing user engagement.

• Animation style: Choose between different animation styles, such as default or fade. The default is default.
• Animation speed: Set the speed of the animation in seconds. The default is 0.8s.
• Autoplay delay: Define the delay between slides when autoplay is enabled. The default is 4s.
• Autoplay slideshow: Enable or disable autoplay for the Slideshow. The default is false.

Navigation and pagination settings

These settings provide options for user interaction with the Slideshow, allowing for a more intuitive navigation experience.

• Controls position vertical: Choose the vertical position of the navigation controls, either above or below the content. The default is above.
• Pagination style: Select the style of pagination, such as dynamic, fraction, progress bar, or scrollbar.
• Loop slides: Enable this option to loop the slides continuously. Note that looping will hide pagination. The default is false.
• Show navigation: Display navigation controls for moving between slides. The default is true.
• Show pagination: Display pagination indicators to show the number of slides. Pagination is not shown in fade animation style.
• Show preview of next slides: Display a preview of the next slides in the sequence. This is not applicable with the fade animation style. The default is true.

Usage notes #

• Responsive design: Ensure that the column count settings are optimized for different devices to maintain a consistent and user-friendly layout.
• Performance: Consider the impact of autoplay and animation settings on page load times and user experience, especially on mobile devices.
• Accessibility: Use clear and descriptive text for navigation controls and ensure that all interactive elements are accessible to users with disabilities.

Usage examples #

1. Creating a product showcase: Use the Slideshow section to display a series of product images with accompanying text blocks. Set the autoplay feature to cycle through the products automatically, and use the fade animation style for a smooth transition effect.

2. Highlighting promotional banners: Incorporate promotional banners into the Slideshow to draw attention to special offers or events. Use the stack on mobile setting to ensure the banners are displayed effectively on smaller screens.

3. Displaying customer testimonials: Combine text and image blocks within the Slideshow to feature customer testimonials. Enable the loop slides option to continuously cycle through the testimonials, providing ongoing social proof to visitors.