Oracle APEX Plug-In: Slideshow

A slideshow is used to cycle through elements. A plugin to display images as a responsive slideshow (Display an automatic or manual slideshow). Credits to W3schools.

Demo Application: https://apex.oracle.com/pls/apex/f?p=133110:9999::BRANCH_TO_PAGE_ACCEPT::9999:P9999_APP_PAGE_REDIRECT:6

Prerequisite:

DB versions: 12.1.0.1,12.2.0.1,18.4.0.0,19.0.0.0.0,19.2.0.0.19,21.0.0.0.0,21.1.0.0.0,21.1.0.0.1

APEX versions 20.1.0.00.13,20.2.0.00.20,21.1.0

Installation:

Export plugin file "region_type_plugin_orclking_slideshow.sql" from source directory and import it into your application.

Steps to Achieve:

Step 1: Export a script "Script to Populate Sample Data.sql" from directory and compile it in your schema.

Step 2: Create a new blank page.

Step 3: Export plugin file "region_type_plugin_orclking_slideshow.sql" from Source directory and import it into your application.

Navigation: Shared Components ==> Plug-ins ==> Import

Plugin will be listed under plug-ins bucket after successful installation.

Step 4: Create a region to the page. Change region type to Slideshow [Plug-In].

Step 5: Construct Oracle SQL query and copy and paste it in region SQL Query section.

Query Template:

SELECT 1 slide_key,
   
       1 slide_seq,
          
       'Image 01' slide_name,
       
       'https://image.com/01' slide_url
          
  FROM dual
          
 WHERE 1 = 1;

Sample Query to Render a Report:

Note: Populate sample data by exporting a script "Script to Populate Sample Data.sql" from directory and compile it in your schema.

SELECT document_id slide_key,
       
       sequence_no slide_seq,
       
       file_name slide_name,
       
       file_url slide_url

FROM fxgn_documents

ORDER BY sequence_no ASC;

Step 6: Fill required attributes

1) Making Manual Slideshow:

Change the attribute Slideshow to Manual

Output: Then you output would display like this,

2) Making Automatic Slideshow:

Change the attribute Slideshow to Automatic

Output: Then you output would display like this,

Limitation: This pulg in will not support for Arabic translated application.

Note: I have built bootstrap carousel extension pulgin, which will support for all language applications. Please give a try.

Bootrstrap Carousel Extension Plugin: https://github.com/tkarkuvelraja/bootstrap_carousel_extension_region_apex_plugin

That's it.

Happy APEXing!!!...

References:

https://www.w3schools.com/howto/howto_js_slideshow.asp