slideshow-gallery-with-thumbnail
Reactive icon

Slideshow Gallery with thumbnail

Stable version 1.0.1 (Compatible with OutSystems 11)
Uploaded
 on 4 Dec (3 weeks ago)
 by 
5.0
 (2 ratings)
slideshow-gallery-with-thumbnail

Slideshow Gallery with thumbnail

Documentation
1.0.1

Outsystems Forge provides a large set of reusable assets that help accelerate application delivery. These assets are made available by our community uses and by Outsystems.

When searching Slideshow Gallery with Thumbnail in Outsystems Forge.

Introduction

A Slideshow Gallery with Thumbnails is a dynamic and user-friendly component designed to enhance content presentation. It provides a seamless way to display multiple elements—such as images, videos, or text—in a visually appealing, interactive format. With integrated thumbnails, users can quickly navigate to specific slides, improving the overall user experience. This document explains the features, technical structure, and implementation details of the slideshow gallery, ensuring a flexible and accessible solution for various applications.

Features of the Slideshow Gallery

  1. Slideshow Functionality

Automatically cycles through slides based on a configurable timer.

Supports manual navigation using "Previous" and "Next" buttons.

Includes an option to pause and resume the slideshow.

  1. Thumbnail Integration

Displays thumbnails of all slides below or alongside the slideshow.

Clicking a thumbnail immediately loads the corresponding slide in the main gallery.

Thumbnails are highlighted to indicate the active slide.

  1. Responsive Design

Fully responsive layout that adapts to various screen sizes.

Optimized for desktop, tablet, and mobile devices.

  1. Customizable Settings

Configurable transition effects (e.g., fade, slide).

Adjustable autoplay duration.

Option to enable or disable thumbnails.


Implementation

CSS Styling


Best Practices

  1. Optimize images for faster loading times.
  2. Use accessible design principles, including ARIA attributes.
  3. Test the gallery on multiple devices and browsers.
  4. Modularize the code for reusability and maintenance.

Code Maintainability

The asset code must be easy to maintain. For this, the following requirements must be met:

Ensure clear and logical separation of components (HTML, CSS, and JavaScript) for easy maintenance.

No disabled or redundant code.


Compliance 

The asset must ensure license compliance. For this, all libraries  (e.g., CSS/JavaScript used for fixed table header) must be used correctly according to their license terms.


Maintenance and Support  

The asset must be kept up to date. For this, the asset must have the following characteristics:

Available in the latest Outsystems version

Description and documentation must be up to date with the latest asset version

The asset owner must provide the following required support:

Reply to any comments or questions

Solve the reported errors

 

Conclusion

This Slideshow Gallery with Thumbnails enhances user interaction by providing a visually appealing and functional way to browse through elements. The implementation is flexible and customizable, making it suitable for a wide range of use cases.