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; }
1 Comments
Thank you, it worked with me after doing some modifications.
ReplyDeleteI have one issue related to bullet clicks.
It looks like the below piece of code doesn't work after adding images and bullets dynamically.
$('.bulletList li').on('click', function() {
var id = ($(this).attr('id').split('_')[1]) - 1;
slide(id);
});
If you have any doubts, Please let me know