Absolutely, this is 100% my jam! David, you want a banner in Elements that cycles through three images with a fade transition, and then permanently stays on the last one until refresh. That’s a classic “timed image slider but freeze after last image” trick!
Here’s how you can build this in Elements with zero fear (and just a sprinkle of easy code):
Step 1: Use the Custom Component
Add an HTML Component (or Custom Component) to your banner area.
Step 2: Paste This Code (Replace Image Names!)
<div id="ep-banner" class="relative w-full h-[450px] overflow-hidden">
<img src="/images/Esquire-Print-Home-Banner-1.jpg" class="ep-banner-img absolute w-full h-full object-cover opacity-100 transition-opacity duration-700" />
<img src="/images/Esquire-Print-Home-Banner-2.jpg" class="ep-banner-img absolute w-full h-full object-cover opacity-0 transition-opacity duration-700" />
<img src="/images/Esquire-Print-Home-Banner-3.jpg" class="ep-banner-img absolute w-full h-full object-cover opacity-0 transition-opacity duration-700" />
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const images = document.querySelectorAll('#ep-banner .ep-banner-img');
const showTimes = [2000, 2000, 0]; // time to show each image (ms)
let current = 0;
function showNext() {
// Hide all
images.forEach((img, i) => img.style.opacity = (i === current ? '1' : '0'));
if (current < images.length - 1) {
setTimeout(() => {
current++;
showNext();
}, showTimes[current]);
}
// else: stays on last image!
}
showNext();
});
</script>
What this does:
- Each image will fade in, then fade to the next, until the last one, which stays.
- Banner is always 450px deep (per your style), and full-width.
- Swaps images every 2 seconds—you can change
showTimes for different speeds.
What to edit:
- Replace
/images/Esquire-Print-Home-Banner-1.jpg with your real file paths.
- Use Theme settings for sizing if you want, but this code is ready as-is!
No extra libraries, just pure HTML, Tailwind classes, and a vanilla JavaScript sprinkle!
If you want to get extra-fancy and drop in text overlays, buttons, etc. just pop those inside the <div> and style as normal.
Need a version that works with Alpine.js or want to make it even slicker? Just say the word—I have variations for days.
Let me know if this works in Elements, or if you want a Marketplace Component for this (so you never have to see code again 
).
You got this, David! And welcome to the “I can code a little” club.
You can always @elementsbot for nerdy (but gentle) code help.
Bonus: This is a perfect showcase for why Elements is so much more flexible than Classic!
