SwiperSlider component for OutSystems is an easy-to-use solution that allows developers to effortlessly integrate sliders into their mobile applications. With just a few simple steps, you can add interactive, responsive slideshows or carousels that work seamlessly across different Mobile sizes.

This plugin is powered by Swiper.js — a modern, lightweight, and highly performant JavaScript library trusted by developers worldwide. By building on top of Swiper, the plugin inherits a wide range of advanced features like touch gestures, autoplay, looping, pagination, and smooth transitions — all wrapped in a native OutSystems experience.

Whether you're showcasing products, onboarding users, or creating dynamic content carousels, this plugin offers the flexibility and polish needed for a professional and engaging UI.

How to Use the Slider Plugin in OutSystems :

Step 1: Add the Dependency

• In your application module, open the Manage Dependencies window.

• Search for the plugin module named SwiperSlider.

• Select the required UI blocks ( EmptySlide , SliderComponent .. etc) and any actions or resources you need.

• Click Apply to add them to your module.

Step 2: Understand the Available Blocks

The plugin provides two flexible blocks:

• EmptySlide

  • This block allows you to apply sliding effects to custom list items.

  • It gives developers the freedom to use any structure or block they’ve built .

  • Drag the EmptySlide block into your screen or UI block.

  • Inside the Placeholder of the EmptySlide:

    1. Bind List inside place holder with any data kist you need (e.g., a list of products .... etc.).

  • Then place your custom layout (card, image, text, etc.) based on your data inside the existing container that’s already provided within the List in the provided Placeholder .
    This container is where the slide effect is applied, so your dynamic content must go inside it for proper functionality.
    
    
    
    
    
    Properties : 
    
    

  • ShowPagination (bool)

  • SlidePrevView (number of slides appeare in view)

  • SpaceBetween in Px

  • effect (static entity (img-F01) contain many sliding effects)

  • InitiatedSlideIndex (strat by) 

  • Loop (looping slides)

  • autoPlayDelay (if 0 or not set => disabled)

  • img-F01Tow Navigation Extra client action are available :
    
    
    
    
    
    
    
    

• SliderComponent 

  • Same as EmptySlideBlock Except that it has some extra predefined UI