Homemega/slider Dynamic Image Carousel Slider Use RESTful Services, Oracle jABER IT LTDjABER IT LTD -9:14 PM 0 Dynamic Image Carousel Slider Use RESTful Services In Oracle Apex 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- 1234567891011<span class="pln"> </span><span class="pun"><</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"slider"</span><span class="pln"> id</span><span class="pun">=</span><span class="str">"slider"</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">button type</span><span class="pun">=</span><span class="str">"button"</span><span class="pln"> </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"button button-prev"</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">i </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"fa fa-chevron-left"</span><span class="pln"> aria</span><span class="pun">-</span><span class="pln">hidden</span><span class="pun">=</span><span class="str">"true"</span><span class="pun">></</span><span class="pln">i</span><span class="pun">></span><span class="pln"> </span><span class="pun"></</span><span class="pln">button</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">button type</span><span class="pun">=</span><span class="str">"button"</span><span class="pln"> </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"button button-next"</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">i </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"fa fa-chevron-right"</span><span class="pln"> aria</span><span class="pun">-</span><span class="pln">hidden</span><span class="pun">=</span><span class="str">"true"</span><span class="pun">></</span><span class="pln">i</span><span class="pun">></span><span class="pln"> </span><span class="pun"></</span><span class="pln">button</span><span class="pun">></span><span class="pln"> </span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span> 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." 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596<span class="pln"> $</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">'use strict'</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> slider </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#slider'</span><span class="pun">),</span><span class="pln"> sliderList </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'<ul></ul>'</span><span class="pun">),</span><span class="pln"> bulletList </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'<ul></ul'</span><span class="pun">),</span><span class="pln"> sliderJSON </span><span class="pun">=</span><span class="pln"> sliderJSON </span><span class="pun">=</span><span class="pln"> JSON</span><span class="pun">.</span><span class="pln">parse</span><span class="pun">(</span><span class="pln">$v</span><span class="pun">(</span><span class="pln"> </span><span class="str">"P4_STORE_SLIDER_JSON"</span><span class="pln"> </span><span class="pun">))</span><span class="pln"> </span><span class="pun">;</span><span class="pln"> sliderJSON</span><span class="pun">.</span><span class="pln">sort</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">a</span><span class="pun">,</span><span class="pln"> b</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> a</span><span class="pun">.</span><span class="pln">order </span><span class="pun">-</span><span class="pln"> b</span><span class="pun">.</span><span class="pln">order</span><span class="pun">;</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> $</span><span class="pun">.</span><span class="pln">each</span><span class="pun">(</span><span class="pln">sliderJSON</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">index</span><span class="pun">,</span><span class="pln"> element</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> sliderList</span><span class="pun">.</span><span class="pln">append</span><span class="pun">(</span><span class="str">"<li><a href='"</span><span class="pun">+</span><span class="pln"> element</span><span class="pun">.</span><span class="pln">url </span><span class="pun">+</span><span class="str">"'><img alt="" src="</span><span class="pun">&</span><span class="pln">quot</span><span class="pun">;</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> element</span><span class="pun">.</span><span class="pln">imagePath </span><span class="pun">+</span><span class="pln"> </span><span class="pun">&</span><span class="pln">quot</span><span class="pun">;</span><span class="str">"></a>"</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">"<div class='content'>"</span><span class="pun">+</span><span class="pln"> element</span><span class="pun">.</span><span class="pln">slideText </span><span class="pun">+</span><span class="str">"</div></li>"</span><span class="pun">);</span><span class="pln"> bulletList</span><span class="pun">.</span><span class="pln">append</span><span class="pun">(</span><span class="str">"<li id='bullet_"</span><span class="pun">+</span><span class="pln"> </span><span class="pun">(</span><span class="pln">index </span><span class="pun">+</span><span class="pln"> </span><span class="lit">1</span><span class="pun">)</span><span class="pln"> </span><span class="pun">+</span><span class="str">"'></li>"</span><span class="pun">);</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> sliderList</span><span class="pun">.</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">'sliderList'</span><span class="pun">);</span><span class="pln"> bulletList</span><span class="pun">.</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">'bulletList'</span><span class="pun">);</span><span class="pln"> slider</span><span class="pun">.</span><span class="pln">append</span><span class="pun">(</span><span class="pln">sliderList</span><span class="pun">);</span><span class="pln"> slider</span><span class="pun">.</span><span class="pln">append</span><span class="pun">(</span><span class="pln">bulletList</span><span class="pun">);</span><span class="pln"> bulletList</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="str">"li:first-child"</span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">'bulletActive'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> firstSlide </span><span class="pun">=</span><span class="pln"> sliderList</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="str">"li:first-child"</span><span class="pun">),</span><span class="pln"> lastSlide </span><span class="pun">=</span><span class="pln"> sliderList</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="str">"li:last-child"</span><span class="pun">),</span><span class="pln"> buttonPrev </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">".button-prev"</span><span class="pun">),</span><span class="pln"> buttonNext </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">".button-next"</span><span class="pun">),</span><span class="pln"> sliderCount </span><span class="pun">=</span><span class="pln"> sliderList</span><span class="pun">.</span><span class="pln">children</span><span class="pun">().</span><span class="pln">length</span><span class="pun">,</span><span class="pln"> sliderWidth </span><span class="pun">=</span><span class="pln"> </span><span class="lit">100.0</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> sliderCount</span><span class="pun">,</span><span class="pln"> slideIndex </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> intervalID</span><span class="pun">;</span><span class="pln"> lastSlide</span><span class="pun">.</span><span class="pln">clone</span><span class="pun">().</span><span class="pln">prependTo</span><span class="pun">(</span><span class="pln">sliderList</span><span class="pun">);</span><span class="pln"> firstSlide</span><span class="pun">.</span><span class="pln">clone</span><span class="pun">().</span><span class="pln">appendTo</span><span class="pun">(</span><span class="pln">sliderList</span><span class="pun">);</span><span class="pln"> sliderList</span><span class="pun">.</span><span class="pln">css</span><span class="pun">({</span><span class="str">"width"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">(</span><span class="lit">100</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> sliderCount</span><span class="pun">)</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">"%"</span><span class="pun">});</span><span class="pln"> sliderList</span><span class="pun">.</span><span class="pln">css</span><span class="pun">({</span><span class="str">"margin-left"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"-100%"</span><span class="pun">});</span><span class="pln"> sliderList</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="str">"li"</span><span class="pun">).</span><span class="pln">each</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">index</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> leftPercent </span><span class="pun">=</span><span class="pln"> </span><span class="pun">(</span><span class="pln">sliderWidth </span><span class="pun">*</span><span class="pln"> index</span><span class="pun">)</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">"%"</span><span class="pun">;</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="str">"left"</span><span class="pun">:</span><span class="pln"> leftPercent</span><span class="pun">});</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="str">"width"</span><span class="pun">:</span><span class="pln"> sliderWidth </span><span class="pun">+</span><span class="pln"> </span><span class="str">"%"</span><span class="pun">});</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> buttonPrev</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">'click'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> slide</span><span class="pun">(</span><span class="pln">slideIndex </span><span class="pun">-</span><span class="pln"> </span><span class="lit">1</span><span class="pun">);</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> buttonNext</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">'click'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> slide</span><span class="pun">(</span><span class="pln">slideIndex </span><span class="pun">+</span><span class="pln"> </span><span class="lit">1</span><span class="pun">);</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'.bulletList li'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'click'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> id </span><span class="pun">=</span><span class="pln"> </span><span class="pun">(</span><span class="pln">$</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'id'</span><span class="pun">).</span><span class="pln">split</span><span class="pun">(</span><span class="str">'_'</span><span class="pun">)[</span><span class="lit">1</span><span class="pun">])</span><span class="pln"> </span><span class="pun">-</span><span class="pln"> </span><span class="lit">1</span><span class="pun">;</span><span class="pln"> slide</span><span class="pun">(</span><span class="pln">id</span><span class="pun">);</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> startTimer</span><span class="pun">();</span><span class="pln"> slider</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">'mouseenter mouseleave'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">){</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> onMouEnt </span><span class="pun">=</span><span class="pln"> </span><span class="pun">(</span><span class="pln">e</span><span class="pun">.</span><span class="pln">type </span><span class="pun">===</span><span class="pln"> </span><span class="str">'mouseenter'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">?</span><span class="pln"> clearInterval</span><span class="pun">(</span><span class="pln">intervalID</span><span class="pun">)</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> startTimer</span><span class="pun">();</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> slide</span><span class="pun">(</span><span class="pln">newSlideIndex</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> marginLeft </span><span class="pun">=</span><span class="pln"> </span><span class="pun">(</span><span class="pln">newSlideIndex </span><span class="pun">*</span><span class="pln"> </span><span class="pun">(-</span><span class="lit">100</span><span class="pun">)</span><span class="pln"> </span><span class="pun">-</span><span class="pln"> </span><span class="lit">100</span><span class="pun">)</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">"%"</span><span class="pun">;</span><span class="pln"> sliderList</span><span class="pun">.</span><span class="pln">animate</span><span class="pun">({</span><span class="str">"margin-left"</span><span class="pun">:</span><span class="pln"> marginLeft</span><span class="pun">},</span><span class="pln"> </span><span class="lit">400</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> newSlideIndex </span><span class="pun"><</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> $</span><span class="pun">(</span><span class="str">".bulletActive"</span><span class="pun">).</span><span class="pln">removeClass</span><span class="pun">(</span><span class="str">'bulletActive'</span><span class="pun">);</span><span class="pln"> bulletList</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="str">"li:last-child"</span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">"bulletActive"</span><span class="pun">);</span><span class="pln"> sliderList</span><span class="pun">.</span><span class="pln">css</span><span class="pun">({</span><span class="str">"margin-left"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">((</span><span class="pln">sliderCount</span><span class="pun">)</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="pun">(-</span><span class="lit">100</span><span class="pun">))</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">"%"</span><span class="pun">});</span><span class="pln"> newSlideIndex </span><span class="pun">=</span><span class="pln"> sliderCount </span><span class="pun">-</span><span class="pln"> </span><span class="lit">1</span><span class="pun">;</span><span class="pln"> slideIndex </span><span class="pun">=</span><span class="pln"> newSlideIndex</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">return</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> newSlideIndex </span><span class="pun">>=</span><span class="pln"> sliderCount </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> $</span><span class="pun">(</span><span class="str">".bulletActive"</span><span class="pun">).</span><span class="pln">removeClass</span><span class="pun">(</span><span class="str">'bulletActive'</span><span class="pun">);</span><span class="pln"> bulletList</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="str">"li:first-child"</span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">"bulletActive"</span><span class="pun">);</span><span class="pln"> sliderList</span><span class="pun">.</span><span class="pln">css</span><span class="pun">({</span><span class="str">"margin-left"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"-100%"</span><span class="pun">});</span><span class="pln"> newSlideIndex </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> slideIndex </span><span class="pun">=</span><span class="pln"> newSlideIndex</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">return</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> $</span><span class="pun">(</span><span class="str">".bulletActive"</span><span class="pun">).</span><span class="pln">removeClass</span><span class="pun">(</span><span class="str">'bulletActive'</span><span class="pun">);</span><span class="pln"> bulletList</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="str">'li:nth-child('</span><span class="pun">+</span><span class="pln"> </span><span class="pun">(</span><span class="pln">newSlideIndex </span><span class="pun">+</span><span class="pln"> </span><span class="lit">1</span><span class="pun">)</span><span class="pln"> </span><span class="pun">+</span><span class="str">')'</span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">'bulletActive'</span><span class="pun">);</span><span class="pln"> slideIndex </span><span class="pun">=</span><span class="pln"> newSlideIndex</span><span class="pun">;</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="pun">};</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> startTimer</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> intervalID </span><span class="pun">=</span><span class="pln"> setInterval</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> buttonNext</span><span class="pun">.</span><span class="pln">click</span><span class="pun">();</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="lit">5000</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> intervalID</span><span class="pun">;</span><span class="pln"> </span><span class="pun">};</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span> 4. Inline Css- >> Paste the following code- 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687<span class="pln"> </span><span class="pun">.</span><span class="pln">slider </span><span class="pun">{</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln"> overflow</span><span class="pun">:</span><span class="pln"> hidden</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">500px</span><span class="pun">;</span><span class="pln"> position</span><span class="pun">:</span><span class="pln"> relative</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">sliderList </span><span class="pun">{</span><span class="pln"> position</span><span class="pun">:</span><span class="pln"> absolute</span><span class="pun">;</span><span class="pln"> top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">300</span><span class="pun">%;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln"> list</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">sliderList li </span><span class="pun">{</span><span class="pln"> position</span><span class="pun">:</span><span class="pln"> absolute</span><span class="pun">;</span><span class="pln"> top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> overflow</span><span class="pun">:</span><span class="pln"> hidden</span><span class="pun">;</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">33.333333</span><span class="pun">%;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">sliderList li img </span><span class="pun">{</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln"> min</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">bulletList </span><span class="pun">{</span><span class="pln"> position</span><span class="pun">:</span><span class="pln"> absolute</span><span class="pun">;</span><span class="pln"> bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">15px</span><span class="pun">;</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0px</span><span class="pln"> </span><span class="lit">450px</span><span class="pun">;</span><span class="pln"> list</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">bulletList li </span><span class="pun">{</span><span class="pln"> display</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">inline</span><span class="pun">-</span><span class="pln">block</span><span class="pun">;</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">12px</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">12px</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50</span><span class="pun">%;</span><span class="pln"> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50</span><span class="pun">%;</span><span class="pln"> </span><span class="pun">-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50</span><span class="pun">%;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50</span><span class="pun">%;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln"> cursor</span><span class="pun">:</span><span class="pln"> pointer</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">bulletList </span><span class="pun">.</span><span class="pln">bulletActive </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#0b0d18; }</span><span class="pln"> </span><span class="pun">.</span><span class="pln">content </span><span class="pun">{</span><span class="pln"> position</span><span class="pun">:</span><span class="pln"> absolute</span><span class="pun">;</span><span class="pln"> top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">14px</span><span class="pun">;</span><span class="pln"> left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> right</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* background-color: rgba(0, 0, 0, 0.3); */</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">51px</span><span class="pun">;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">button </span><span class="pun">{</span><span class="pln"> position</span><span class="pun">:</span><span class="pln"> absolute</span><span class="pun">;</span><span class="pln"> bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">15px</span><span class="pun">;</span><span class="pln"> z</span><span class="pun">-</span><span class="pln">index</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2</span><span class="pun">;</span><span class="pln"> display</span><span class="pun">:</span><span class="pln"> block</span><span class="pun">;</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">40px</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">40px</span><span class="pun">;</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">sizing</span><span class="pun">:</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">box</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">36</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.6</span><span class="pun">);</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="pln">prev </span><span class="pun">{</span><span class="pln"> left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">15px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="kwd">next</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> right</span><span class="pun">:</span><span class="pln"> </span><span class="lit">15px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span> 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 12345678910111213141516171819202122232425262728293031323334353637383940414243<span class="pln"> DECLARE URL_SERVER_NAME VARCHAR2 </span><span class="pun">(</span><span class="lit">500</span><span class="pun">)</span><span class="pln"> </span><span class="pun">:=</span><span class="pln"> </span><span class="str">'https://apex.oracle.com/pls/apex/my_stock/get/view/'</span><span class="pun">;</span><span class="pln"> CURSOR REPORT IS SELECT OID</span><span class="pun">,</span><span class="pln"> SLIDER_TEXT</span><span class="pun">,</span><span class="pln"> SLIDER_LINK FROM SLIDESHOW_IMG</span><span class="pun">;</span><span class="pln"> TYPE L_REPORT_TYPE IS RECORD </span><span class="pun">(</span><span class="pln"> OID SLIDESHOW_IMG</span><span class="pun">.</span><span class="pln">OID</span><span class="pun">%</span><span class="pln">TYPE</span><span class="pun">,</span><span class="pln"> SLIDER_TEXT SLIDESHOW_IMG</span><span class="pun">.</span><span class="pln">SLIDER_TEXT</span><span class="pun">%</span><span class="pln">TYPE</span><span class="pun">,</span><span class="pln"> SLIDER_LINK SLIDESHOW_IMG</span><span class="pun">.</span><span class="pln">SLIDER_LINK</span><span class="pun">%</span><span class="pln">TYPE </span><span class="pun">);</span><span class="pln"> TYPE L_REPORT_TAB IS TABLE OF L_REPORT_TYPE</span><span class="pun">;</span><span class="pln"> L_REPORT L_REPORT_TAB</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">BEGIN</span><span class="pln"> OPEN REPORT</span><span class="pun">;</span><span class="pln"> FETCH REPORT BULK COLLECT INTO L_REPORT</span><span class="pun">;</span><span class="pln"> CLOSE REPORT</span><span class="pun">;</span><span class="pln"> APEX_JSON</span><span class="pun">.</span><span class="pln">INITIALIZE_CLOB_OUTPUT</span><span class="pun">;</span><span class="pln"> APEX_JSON</span><span class="pun">.</span><span class="pln">OPEN_ARRAY</span><span class="pun">;</span><span class="pln"> </span><span class="pun">--</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> FOR L_CNT IN L_REPORT</span><span class="pun">.</span><span class="pln">FIRST </span><span class="pun">..</span><span class="pln"> L_REPORT</span><span class="pun">.</span><span class="pln">LAST LOOP APEX_JSON</span><span class="pun">.</span><span class="pln">OPEN_OBJECT</span><span class="pun">;</span><span class="pln"> </span><span class="pun">--</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> APEX_JSON</span><span class="pun">.</span><span class="pln">WRITE </span><span class="pun">(</span><span class="str">'imagePath'</span><span class="pun">,</span><span class="pln"> URL_SERVER_NAME </span><span class="pun">||</span><span class="pln"> L_REPORT </span><span class="pun">(</span><span class="pln">L_CNT</span><span class="pun">).</span><span class="pln">OID</span><span class="pun">);</span><span class="pln"> APEX_JSON</span><span class="pun">.</span><span class="pln">WRITE </span><span class="pun">(</span><span class="str">'order'</span><span class="pun">,</span><span class="pln"> L_REPORT </span><span class="pun">(</span><span class="pln">L_CNT</span><span class="pun">).</span><span class="pln">OID</span><span class="pun">);</span><span class="pln"> APEX_JSON</span><span class="pun">.</span><span class="pln">WRITE </span><span class="pun">(</span><span class="str">'url'</span><span class="pun">,</span><span class="pln"> L_REPORT </span><span class="pun">(</span><span class="pln">L_CNT</span><span class="pun">).</span><span class="pln">SLIDER_LINK</span><span class="pun">);</span><span class="pln"> APEX_JSON</span><span class="pun">.</span><span class="pln">WRITE </span><span class="pun">(</span><span class="str">'slideText'</span><span class="pun">,</span><span class="pln"> L_REPORT </span><span class="pun">(</span><span class="pln">L_CNT</span><span class="pun">).</span><span class="pln">SLIDER_TEXT</span><span class="pun">);</span><span class="pln"> APEX_JSON</span><span class="pun">.</span><span class="pln">CLOSE_OBJECT</span><span class="pun">;</span><span class="pln"> </span><span class="pun">--</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">END</span><span class="pln"> LOOP</span><span class="pun">;</span><span class="pln"> APEX_JSON</span><span class="pun">.</span><span class="pln">CLOSE_ARRAY</span><span class="pun">;</span><span class="pln"> </span><span class="pun">--</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">:</span><span class="pln">P4_STORE_SLIDER_JSON </span><span class="pun">:=</span><span class="pln"> APEX_JSON</span><span class="pun">.</span><span class="pln">GET_CLOB_OUTPUT</span><span class="pun">;</span><span class="pln"> DBMS_OUTPUT</span><span class="pun">.</span><span class="pln">PUT_LINE </span><span class="pun">(</span><span class="pln">APEX_JSON</span><span class="pun">.</span><span class="pln">GET_CLOB_OUTPUT</span><span class="pun">);</span><span class="pln"> APEX_JSON</span><span class="pun">.</span><span class="pln">FREE_OUTPUT</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">END</span><span class="pun">;</span> 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. Then Enjoy......................... Facebook Twitter
