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) );
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. Click here to learn to create an image URL in Oracle APEX
Step 3:- I think you have created 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.
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;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.
As I have already told you that before this implementation if you don't know how to create image URL and APEX_JSON then it is difficult to understand the above PL/SQL code.
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.
<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>
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.
.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.
$(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;
};
});
You can modify the above CSS code base on your requirements. That's all for today I think this Dynamic Image Carousel Slider in Oracle APEX post will helpful for you.
If you like this post then share your view in the comment box. Also, Share this post with your friends and also share in the oracle apex related group.
Demo URL:-
Reference URL:-
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