Slideshow: Autoscroll with Loading Lines

Description:

• Autoscroll Slideshow (every 5 seconds)
• Loading lines at bottom of Slideshow image

#1. First, enable Slideshow Autoplay

#2. Next, use code to Page Header Injection

<style>
button.gallery-fullscreen-slideshow-bullet {
    width: 150px !important;
    border-radius: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    height: 8px !important;
    background-color: rgba(255, 255, 255, 0.3) !important;
    border: none !important;
}

button.gallery-fullscreen-slideshow-bullet::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: orange;
    transition: width 0.1s linear;
}

button.gallery-fullscreen-slideshow-bullet.active::before {
    animation: progress-fill 5s linear forwards;
}

@keyframes progress-fill {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

button.gallery-fullscreen-slideshow-bullet:not(.active)::before {
    width: 0%;
    animation: none;
}
</style>