1. Overview
This document talks about how to do Dynamic Image Carousel Slider in Oracle APEX.
2. Technologies and Tools Used
The following technologies has been used to achieve the expected output.
- Oracle APEX
- PL/SQL
- JavaScript, CSS, HTML
- APEX_JSON
3. Use Case
Assume that there is a requirement of Dynamic Image Carousel Slider. Image Carousel Slider is a way to display multiple rotating images. You can add text also add links that can be linked to a specific page. If we are talking about a real-time example or scenario then many product-based web applications use to display their latest or upcoming products. There is no features available in Oracle APEX. Here I have alternate solution for the mentioned requirement.
This document explains how to achieve this requirement.
4. Architecture
Following steps explains in detail,
Step1: Create a Slider table to store data into the slider table and Image Carousel Slider Interface.
Sample Code:
CREATE TABLE SLIDER(
ID NUMBER,
MIME_TYPE VARCHAR2(200),
IMAGE BLOB,
SLIDER_TEXT VARCHAR2(200),
FILE_NAME VARCHAR2(200),
SLIDER_LINK VARCHAR2(200)
);
See the below interface for insert slider information.
Step 2: After the creating slider table, Now you have to create an image URL that I already mentioned in the above paragraph.
Step 3: After creating a successful image URL, Now the next step to create a hidden page item that stores the slider table information in a JSON format.
Step 4: After creating the hidden page item, You have to create a before header PL/SQL process which returns the slider information into JSON format. You can use below PL/SQL process.
Sample Code:
DECLARE
URL_SERVER_NAME VARCHAR2(500):= ‘https://apex.oracle.com/pls/apex/javainhand/slider/all_slider_info/’;
CURSOR REPORT
IS
SELECT ID,
SLIDER_TEXT,
SLIDER_LINK
FROM SLIDER;
TYPE L_REPORT_TYPE IS RECORD
( ID SLIDER.ID%TYPE,
SLIDER_TEXT SLIDER.SLIDER_TEXT%TYPE,
SLIDER_LINK SLIDER.SLIDER_LINK%TYPE
);
TYPE L_REPORT_TAB IS TABLE OF L_REPORT_TYPE;
L_REPORT L_REPORT_TAB;
BEGIN
OPEN REPORT;
FETCH REPORT BULK COLLECT INTO L_REPORT;
CLOSE REPORT;
APEX_JSON.INITIALIZE_CLOB_OUTPUT;
APEX_JSON.OPEN_ARRAY; — {
FOR L_CNT IN L_REPORT.FIRST .. L_REPORT.LAST
LOOP
APEX_JSON.OPEN_OBJECT; — {
APEX_JSON.WRITE(‘imagePath’,URL_SERVER_NAME||L_REPORT(L_CNT).ID);
APEX_JSON.WRITE(‘order’, L_REPORT(L_CNT).ID);
APEX_JSON.WRITE(‘url’, L_REPORT(L_CNT).SLIDER_LINK);
APEX_JSON.WRITE(‘slideText’, L_REPORT(L_CNT).SLIDER_TEXT);
APEX_JSON.CLOSE_OBJECT; — }
END LOOP;
APEX_JSON.CLOSE_ARRAY; — }
:P2_STORE_SLIDER_JSON:=APEX_JSON.GET_CLOB_OUTPUT;
DBMS_OUTPUT.PUT_LINE(APEX_JSON.GET_CLOB_OUTPUT);
APEX_JSON.FREE_OUTPUT;
END;
As you see in the above PL/SQL process, I am fetching the slider information using a simple cursor and convert into JSON format then that JSON data store into a hidden page item.
Step 5: After creating successfully before header process, Now go to your static content region and add the below HTML code. You can match the following screenshot.
Sample Code:
<div class=”slider” id=”slider”>
<button type=”button” class=”button button-prev”>
<i class=”fa fa-chevron-left” aria-hidden=”true”></i>
</button>
<button type=”button” class=”button button-next”>
<i class=”fa fa-chevron-right” aria-hidden=”true”></i>
</button>
</div>
See the below interface for insert slider information.
Step 6: After the add above HTML code into your static region, Now go to your page CSS section and add below CSS code into CSS inline section. You can match the following screenshot.
Sample Code:
.slider {
width: 100%;
overflow: hidden;
height: 500px;
position: relative;
}
.sliderList {
position: absolute;
top: 0;
width: 300%;
height: 100%;
list-style: none;
}
.sliderList li {
position: absolute;
top: 0;
bottom: 0;
overflow: hidden;
width: 33.333333%;
height: 100%;
padding: 0;
margin: 0;
}
.sliderList li img {
width: 100%;
min-height: 100%;
border: none;
}
.bulletList {
position: absolute;
bottom: 15px;
width: 100%;
margin: 0px 450px;
list-style: none;
}
.bulletList li {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
}
.bulletList .bulletActive { background-color: #0b0d18; }
.content {
position: absolute;
top: 14px;
left: 0;
right: 0;
text-align: center;
/* background-color: rgba(0, 0, 0, 0.3); */
font-size: 51px;
color: #fff;
}
.button {
position: absolute;
bottom: 15px;
z-index: 2;
display: block;
width: 40px;
height: 40px;
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
background-color: rgba(5, 0, 36, 0.6);
color: #fff;
}
.button-prev { left: 15px; }
.button-next { right: 15px; }
Step 7: After adding CSS code, Now the final step add the below javascript code into Page Function and Global Variable Declaration section.
Sample Code:
$(function() {
‘use strict’;
var slider = $(‘#slider’),
sliderList = $(‘<ul></ul>’),
bulletList = $(‘<ul></ul’),
sliderJSON = sliderJSON = JSON.parse($v( “P2_STORE_SLIDER_JSON” )) ;
sliderJSON.sort(function(a, b) {
return a.order – b.order;
});
$.each(sliderJSON, function(index, element) {
sliderList.append(“<li><a href='”+ element.url +”‘><img src='” + element.imagePath + “‘ alt=”></a>” +
“<div class=’content’>”+ element.slideText +”</div></li>”);
bulletList.append(“<li id=’bullet_”+ (index + 1) +”‘></li>”);
});
sliderList.addClass(‘sliderList’);
bulletList.addClass(‘bulletList’);
slider.append(sliderList);
slider.append(bulletList);
bulletList.find(“li:first-child”).addClass(‘bulletActive’);
var firstSlide = sliderList.find(“li:first-child”),
lastSlide = sliderList.find(“li:last-child”),
buttonPrev = $(“.button-prev”),
buttonNext = $(“.button-next”),
sliderCount = sliderList.children().length,
sliderWidth = 100.0 / sliderCount,
slideIndex = 0,
intervalID;
lastSlide.clone().prependTo(sliderList);
firstSlide.clone().appendTo(sliderList);
sliderList.css({“width”: (100 * sliderCount) + “%”});
sliderList.css({“margin-left”: “-100%”});
sliderList.find(“li”).each(function(index) {
var leftPercent = (sliderWidth * index) + “%”;
$(this).css({“left”: leftPercent});
$(this).css({“width”: sliderWidth + “%”});
});
buttonPrev.on(‘click’, function() {
slide(slideIndex – 1);
});
buttonNext.on(‘click’, function() {
slide(slideIndex + 1);
});
$(‘.bulletList li’).on(‘click’, function() {
var id = ($(this).attr(‘id’).split(‘_’)[1]) – 1;
slide(id);
});
startTimer();
slider.on(‘mouseenter mouseleave’, function(e){
var onMouEnt = (e.type === ‘mouseenter’) ?
clearInterval(intervalID) : startTimer();
});
function slide(newSlideIndex) {
var marginLeft = (newSlideIndex * (-100) – 100) + “%”;
sliderList.animate({“margin-left”: marginLeft}, 400, function() {
if ( newSlideIndex < 0 ) {
$(“.bulletActive”).removeClass(‘bulletActive’);
bulletList.find(“li:last-child”).addClass(“bulletActive”);
sliderList.css({“margin-left”: ((sliderCount) * (-100)) + “%”});
newSlideIndex = sliderCount – 1;
slideIndex = newSlideIndex;
return;
} else if ( newSlideIndex >= sliderCount ) {
$(“.bulletActive”).removeClass(‘bulletActive’);
bulletList.find(“li:first-child”).addClass(“bulletActive”);
sliderList.css({“margin-left”: “-100%”});
newSlideIndex = 0;
slideIndex = newSlideIndex;
return;
}
$(“.bulletActive”).removeClass(‘bulletActive’);
bulletList.find(‘li:nth-child(‘+ (newSlideIndex + 1) +’)’).addClass(‘bulletActive’);
slideIndex = newSlideIndex;
});
};
function startTimer() {
intervalID = setInterval(function() { buttonNext.click(); }, 5000);
return intervalID;
};
});
5. Screen Shot
Output:
Here I have created a Dynamic Image Carousel Slider in Oracle APEX. The below is the output for the test application.
Sample 2:
