Slideshow with text controls

Overview #

The Slideshow with text controls section is designed to create a dynamic slideshow that utilizes a text and/or icon-based interface for navigation. This section is particularly useful for highlighting product features or details, allowing users to interact with the slideshow through various controls and settings.

Key components and functionality #

Slideshow settings

This group of settings allows you to customize the behavior and appearance of the slideshow, including animation style, speed, and control positions.

Animation style

Choose the style of animation for transitioning between slides. The available options are:

1. Default - The standard animation style.
2. Fade - A smooth fade transition between slides.

Default: Default

Animation speed

Control the speed of the animation between slides. You can set a value between 0.1 and 5 seconds, with a step of 0.1 seconds.

Default: 0.8 seconds

Autoplay delay

Determine the delay between slides when autoplay is enabled. You can choose a delay between 0 and 10 seconds, with a step of 1 second.

Default: 4 seconds

Autoplay slideshow

Enable or disable the autoplay feature for the slideshow. When enabled, the slideshow will automatically transition between slides.

Default: Disabled

Controls position (horizontal)

Position the slideshow controls horizontally. The options are:

1. Left - Controls are positioned on the left side.
2. Right - Controls are positioned on the right side.

Default: Left

Pagination style

Choose the style of pagination for the slideshow. The options include:

1. Dynamic - Pagination updates dynamically as slides change.
2. Fraction - Displays the current slide number over the total number of slides.
3. Progress bar - Shows a progress bar indicating the slideshow's progress.
4. Scrollbar - Displays a scrollbar for navigation.

Navigation and pagination

These settings control the visibility and style of navigation and pagination elements within the slideshow.

Show navigation

Enable or disable the navigation interface for the slideshow, allowing users to move between slides manually.

Default: Enabled

Show pagination

Enable or disable the pagination interface, which shows the number of slides. Note that pagination is not shown when the fade animation style is selected.

Show preview of next slides

Allow a preview of the next slide to be visible, providing a hint of upcoming content. This feature is not applicable with the fade animation style.

Default: Enabled

Usage notes #

• Responsive Design: Ensure that the slideshow is tested on various devices to maintain a consistent user experience. Adjust settings like control positions and autoplay to suit different screen sizes.
• Performance: Keep the number of slides reasonable to avoid performance issues, especially on mobile devices.
• Accessibility: Consider users with disabilities by providing alternative text for images and ensuring that controls are easily navigable via keyboard.

Usage examples #

1. Product Highlighting: Use the slideshow to showcase different features of a product. Set the animation style to "fade" for a smooth transition and enable autoplay with a delay of 3 seconds to automatically cycle through the features.

2. Event Promotion: Create a slideshow to promote an upcoming event. Use the "dynamic" pagination style to keep users informed of their progress through the slides, and position the controls on the right for easy navigation.

3. Portfolio Display: Display a portfolio of work with the slideshow. Set the animation speed to 1 second for a leisurely pace and enable the preview of next slides to entice viewers to continue exploring.