How To Use Background Slideshow Images In Oracle Apex ?

How To Use Background Slideshow Images In Oracle Apex

How To Use Background Slideshow Images In Oracle Apex. 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 Inshallah. Everyone's Cooperation Is Desirable.

Steps How To Use Background Slideshow Images

Complete Steps For How To Use A Background Slideshow Image. The Following SQL Code Has Been Used By Your Apex Application.

1. Goto Shared Components - Static Application Files - Upload File-

I Have Already Selected The Image Of My Choice And Put It In A Folder..

2. Create A New Page Or Open Your Specific Page

3. Go To Page Properties Inline - Paste The Following Code-

.t-Login-logo.fa {
     color: rgb(30, 30, 30);
 }

 .t-Login-header {
     padding: 0px 0;
 }

 .t-Login-region,
 .t-MediaList {
     background: rgba(255, 255, 255, 0.65) !important;
 }

 .slideshow {
     list-style: none;
     margin: 0px;
 }

 .slideshow li span {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0px;
     left: 0px;
     color: transparent;
     background-size: cover;
     background-position: 50% 50%;
     background-repeat: none;
     opacity: 0;
     z-index: 0;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     -webkit-animation: imageAnimation 48s linear infinite 0s;
     -moz-animation: imageAnimation 48s linear infinite 0s;
     animation: imageAnimation 48s linear infinite 0s;
 }

 .slideshow li:nth-child(1) span {
     background-image: url(#APP_IMAGES#01.jpg);
 }

 .slideshow li:nth-child(2) span {
     background-image: url(#APP_IMAGES#02.jpg);
     -webkit-animation-delay: 8s;
     -moz-animation-delay: 8s;
     animation-delay: 8s;
 }

 .slideshow li:nth-child(3) span {
     background-image: url(#APP_IMAGES#03.jpg);
     -webkit-animation-delay: 16s;
     -moz-animation-delay: 16s;
     animation-delay: 16s;
 }

 .slideshow li:nth-child(4) span {
     background-image: url(#APP_IMAGES#04.jpg);
     -webkit-animation-delay: 24s;
     -moz-animation-delay: 24s;
     animation-delay: 24s;
 }

 .slideshow li:nth-child(5) span {
     background-image: url(#APP_IMAGES#05.jpg);
     -webkit-animation-delay: 32s;
     -moz-animation-delay: 32s;
     animation-delay: 32s;
 }

 .slideshow li:nth-child(6) span {
     background-image: url(#APP_IMAGES#06.jpg);
     -webkit-animation-delay: 20s;
     -moz-animation-delay: 20s;
     animation-delay: 20s;
 }

 @-webkit-keyframes imageAnimation {
     0% {
         opacity: 0;
         -webkit-animation-timing-function: ease-in;
     }

     12.5% {
         opacity: 1;
         -webkit-animation-timing-function: ease-out;
     }

     25% {
         opacity: 1;
     }

     37.5% {
         opacity: 0;
     }

     100% {
         opacity: 0;
     }
 }

 @-moz-keyframes imageAnimation {
     0% {
         opacity: 0;
         -moz-animation-timing-function: ease-in;
     }

     12.5% {
         opacity: 1;
         -moz-animation-timing-function: ease-out;
     }

     25% {
         opacity: 1;
     }

     37.5% {
         opacity: 0;
     }

     100% {
         opacity: 0;
     }
 }

 @keyframes imageAnimation {
     0% {
         opacity: 0;
         -webkit-animation-timing-function: ease-in;
         -moz-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     12.5% {
         opacity: 1;
         -webkit-animation-timing-function: ease-out;
         -moz-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
     }

     25% {
         opacity: 1;
     }

     37.5% {
         opacity: 0;
     }

     100% {
         opacity: 0;
     }
 }

 .no-cssanimations .slideshow li span {
     opacity: 1;
 }

 .t-Login-logo {
     background-image: url("#APP_IMAGES#app-82667-logo.png");
     background-size: cover;
     border-radius: 50%;
     width: 100px;
     height: 100px;
     background-image: url("#APP_IMAGES#app-82667-logo.png");
     cursor: pointer;
 }

 .field-icon {
     right: 5px;
     margin-left: -25px;
     margin-top: 14px;
     position: relative;
     z-index: 2;
 }

4. Header And Footer - Paste The Following Code-

<ul class="slideshow">
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
</ul>

🔗 All Image Url-
URL- https://cutt.ly/EnVFtWk

🔗 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.combr /> 🌐 FB- facebook.com/mdjaber.hossen1
Please Subscribe to My Channel

Many thanks for visiting the site.