In this post, We explore the Dynamic Image Carousel Slider in Oracle APEX.
What is the 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.
How to Create Dynamic Image Carousel Slider in Oracle APEX?
Before starting this implementation, I will tell you that you must have to knowledge about how to create Image URL in Oracle APEX and APEX_JSON.
In this Dynamic Image Carousel Slider, We have to add text and click slider which helps to redirect to a specific page or product. So that we have to store all the Image Carousel Slider in a specific database table.
Step 1:- Create a Slider table to store data into the slider table and Image Carousel Slider Interface.
CREATE TABLE SLIDER( ID NUMBER, MIME_TYPE VARCHAR2(200), IMAGE BLOB, SLIDER_TEXT VARCHAR2(200), FILE_NAME VARCHAR2(200), SLIDER_LINK VARCHAR2(200) );
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.
DECLARE
URL_SERVER_NAME VARCHAR2(500):= 'https://apex.oracle.com/pls/apex/javainhand/slider/all_slider_info/';
//Use your Image Restful Service URL into URL_SERVER_NAME Variable
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;
<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>
.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; }
0 Comments
If you have any doubts, Please let me know