Dynamic Image Carousel Slider Use RESTful Services, Oracle

Dynamic Image Carousel Slider Use RESTful Services In Oracle Apex

1. Create a New Page And New Regions
Goto Page Properties >> Type-Static Content
Source Code >> Paste the following 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>

2. Create a New Item, Name- P4_STORE_SLIDER_JSON

3. Goto Page Properties >>
Function and Global Variable Declaration >> Paste the following code- "Remember, you must change the name of the page item you created."


	    $(function() {
	'use strict';

	var slider = $('#slider'),
	sliderList = $('<ul></ul>'),
	bulletList = $('<ul></ul'),
	sliderJSON =  sliderJSON =  JSON.parse($v( "P4_STORE_SLIDER_JSON" )) ;
	sliderJSON.sort(function(a, b) {
		return a.order - b.order;
	});

	$.each(sliderJSON, function(index, element) {
		sliderList.append("<li><a href="&quot;+ element.url +&quot;"><img alt="" src="&quot; + element.imagePath + &quot;"></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;
	};
    });

4. Inline Css- >> Paste the following 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; }

5. Create a Processes >>
Before Header-Name- JSON format >> Paste the following code- PL/SQL Code-

"Use your own RESTful Services URL. If you want to work in a new table, you need to change the table code. If you don't know how to create RESTful Services URL, please watch the video by clicking on the link below." "Remember, you must change the name of the page item you created."

🔗 Use ORDS RESTful Services Video Url--
URL-https://youtu.be/jmx1GenEYlM


          DECLARE
    URL_SERVER_NAME   VARCHAR2 (500)
        := 'https://apex.oracle.com/pls/apex/my_stock/get/view/';

    CURSOR REPORT IS SELECT OID, SLIDER_TEXT, SLIDER_LINK FROM SLIDESHOW_IMG;

    TYPE L_REPORT_TYPE IS RECORD
    (
        OID            SLIDESHOW_IMG.OID%TYPE,
        SLIDER_TEXT    SLIDESHOW_IMG.SLIDER_TEXT%TYPE,
        SLIDER_LINK    SLIDESHOW_IMG.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).OID);
        APEX_JSON.WRITE ('order', L_REPORT (L_CNT).OID);
        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;                                                -- }
    :P4_STORE_SLIDER_JSON := APEX_JSON.GET_CLOB_OUTPUT;
    DBMS_OUTPUT.PUT_LINE (APEX_JSON.GET_CLOB_OUTPUT);
    APEX_JSON.FREE_OUTPUT;
END;

6. Hide P42_STORE_SLIDER_JSON Item.

🔗 Demo Application-
URL- Demo Application
Username - demo, Pass- demo

I hope everyone will like it. Please watch the full video,
Comment on any of your problems, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable. Visit my blog site, new technology related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work.
Please stay tuned by subscribing to the YouTube channel, and encourages new videos to be uploaded.
=================
Visit my site to get more collaborative posts about Oracle Apex and subscribe to my YouTube channel. Thanks.
Comment on any of your issues, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable.
Visit my blog site, new technology-related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work.
==============================

🙍🏾‍ Md jABER HOSSEN
📲 Mobile- +8801760688286
📨 Email- jaberit786@gmail.com
🌐 FB- facebook.com/mdjaber.hossen1
Please Subscribe to My Channel

Many thanks for visiting the site.