Solved

HTML Widget - Rotating Banners

Forum|Forum|11 days ago
November 11, 2025
10 replies
91 views

aluciani
Helper ⭐️

I have a html widget that I typically add banners to on my community homepage. Is starting to get longer than I would like. Does anyone know if I can add three “banners” in one html widget and have them rotate so I just need one widget vs three that I currently have? Each image, once clicked would go to a different URL.

Best answer by mitchell.gordon

<div id="carousel">
<div class="widget-container widget-container--banner carousel-widget-1 active">
<div class="widget-placeholder">
<div>
<section class="banner qa-banner-container homepage-widget-wrapper widget-container-spacing homepage-widget-wrapper--no-side-margins" style="">
<div class="sitewidth">
<div class="col">
<div class="qa-banner-container banner-container">
<div class="sitewidth banner-widget__layout carousel-widget-1-background" style="flex-direction: column">
<div class="banner-widget__contents" style="padding-bottom: 0px">
<div class="text-left custom-left">
<h2 class="widget__heading" style="">
  Header Text Goes Here
</h2>
</div>
<div style="">
<p class="text-left custom-left">
  H2 Text Goes Here
</p>
</div>
<div class="text-left banner-widget__button">
<a href="Insert URL Here>Button Text Here</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="widget-container widget-container--banner carousel-widget-2">
<div class="widget-placeholder">
<div>
<section class="banner qa-banner-container homepage-widget-wrapper widget-container-spacing homepage-widget-wrapper--no-side-margins" style="">
<div class="sitewidth">
<div class="col">
<div class="qa-banner-container banner-container">
<div class="sitewidth banner-widget__layout carousel-widget-2-background" style="flex-direction: column">
<div class="banner-widget__contents" style="padding-bottom: 0px">
<div class="text-left custom-left">
<h2 class="widget__heading" style="">
  Header Text Goes Here
</h2>
</div>
<div style="">
<p class="text-left custom-left">
H2 Text Goes Here
</p>
</div>
<div class="text-left banner-widget__button">
<a href=”Insert url Here">Button Text Here</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="widget-container widget-container--banner carousel-widget-3">
<div class="widget-placeholder">
<div>
<section class="banner qa-banner-container homepage-widget-wrapper widget-container-spacing homepage-widget-wrapper--no-side-margins" style="">
<div class="sitewidth">
<div class="col">
<div class="qa-banner-container banner-container">
<div class="sitewidth banner-widget__layout carousel-widget-3-background" style="flex-direction: column">
<div class="banner-widget__contents" style="padding-bottom: 0px">
<div class="text-left custom-left">
<h2 class="widget__heading" style="">
Header Text Goes Here
</h2>
</div>
<div style="">
<p class="text-left custom-left">
H2 Text Goes Here
</p>
</div>
<div class="text-left banner-widget__button">
<a href="Insert url Here">Button Text Here</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<style>
.carousel-widget-1-background {
background: url(Insert Image Here);
background-position-x: center;
}
.carousel-widget-2-background {
background: url(Insert Image Here;
background-position-x: center;
}
.carousel-widget-3-background {
background: url(Insert Image Here;
background-position-x: center;
}
#carousel
> div.widget-container.widget-container--banner
> div
> div
> section
> div
> div
> div
> div
> div
> div
> h2 {
padding-left: 0;
}
#carousel > div.widget-container.widget-container--banner {
height: 310px;
background-size: cover;
background-repeat: no-repeat;
}
#carousel
> div.widget-container.widget-container--banner
> div
> div
> section
> div
> div
> div
> div
> div {
float: left;
}
#carousel > div.widget-container.widget-container--banner > div > div > section > div > div > div > div{
align-items: flex-start;
height: 310px;
}
#carousel
> div.widget-container.widget-container--banner
> div
> div
> section
> div
> div
> div
> div
> div.banner-widget__contents {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 17px;
width: 50%;
justify-content: center;
}
#carousel
> div.widget-container.widget-container--banner
> div
> div
> section
> div
> div
> div
> div
> div.banner-widget__contents
> div
> h2 {
color: #000;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 47.949px; /* 149.841% */
margin: 0;
}
#carousel
> div.widget-container.widget-container--banner
> div
> div
> section
> div
> div
> div
> div
> div
> div
> p {
color: #000;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 150%;
margin: 0;
}
#carousel
> div.widget-container.widget-container--banner
> div
> div
> section
> div
> div
> div
> div
> div
> div.text-left.banner-widget__button.carousel-button {
max-width: 30%;
margin: 0;
}
div.text-left.banner-widget__button.carousel-button > a {
font-size: 20px;
font-weight: 400;
line-height: 20px;
height: 150%;
margin: 0;
align-content: center;
}
/* Container for the carousel */
#carousel {
position: relative;
width: 100%; /* or set to a specific width */
height: 310px; /* Adjust based on the height of your banners */
overflow: hidden;
}
/* Make sure each banner takes up 100% width of the container */
#carousel > div.widget-container--banner {
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 310px;
opacity: 0;
transition: opacity 2s ease-in-out, left 2s ease-in-out;
}
/* The active banner */
#carousel > div.widget-container--banner.active {
left: 0;
opacity: 1;
}
/* Optional: Styling for individual banners */
/*#carousel > div.widget-container--banner img {
width: 100%;
height: auto;
object-fit: cover; Ensure images fill their container without stretching
}*/
#carousel
> div
> div
> div
> div
> section.banner.qa-banner-container.homepage-widget-wrapper.widget-container-spacing.homepage-widget-wrapper--no-side-margins {
height: 310px;
display: flex;
flex-direction: column;
justify-content: center;
}
.text-left.custom-left {
max-width: 80%;
}
@media only screen and (min-width: 668px) and (max-width: 1000px) {
#carousel
> div.widget-container.widget-container--banner
> div
> div
> section
> div
> div
> div
> div
> div
> div
> p {
max-width: 70%;
}
}
@media only screen and (max-width: 834px) {
#carousel
> div.widget-container.widget-container--banner
> div
> div
> section
> div
> div
> div
> div
> div
> div
> p {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
#carousel
> div.widget-container.widget-container--banner.carousel-widget-2.active
> div
> div
> section
> div
> div
> div
> div
> div
> div
> h2 {
color: #000;
font-size: 28px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 171.246% */
}
}
@media only screen and (max-width: 600px) {
.text-left.custom-left {
max-width: 75%;
}
}
</style>
<script>
function createCarousel() {
// Target the widget containers (banners)
const banners = document.querySelectorAll(
"#carousel > div.widget-container--banner"
);
let currentIndex = 0;
banners.forEach((banner, index) => {
banner.classList.remove("active");
if (index === currentIndex) {
banner.classList.add("active");
}
});
function showNext() {
banners[currentIndex].classList.remove("active");
currentIndex = (currentIndex + 1) % banners.length;
banners[currentIndex].classList.add("active");
}
// Set up an interval to automatically show the next banner every 4 seconds
setInterval(showNext, 5000); // 5000 milliseconds = 5 seconds
}
// comment out bellow to stop carousel and edit the banners
document.addEventListener("DOMContentLoaded", createCarousel);
</script>

mitchell.gordon
Helper ⭐️⭐️
Forum|Forum|11 days ago
November 11, 2025

Yes you can do this and I have something similar on my community community.jamf.com It is at the bottom of the homepage. Let me know what you think of it and I can see what I can do to help.

aluciani
Author
Helper ⭐️
Forum|Forum|11 days ago
November 11, 2025

Love it - any chance you can share the code @mitchell.gordon ? Or DM it if you don’t want it public.

your site look great 👍🏻

mitchell.gordon
Helper ⭐️⭐️
Answer
Forum|Forum|10 days ago
November 12, 2025

<div id="carousel">
<div class="widget-container widget-container--banner carousel-widget-1 active">
<div class="widget-placeholder">
<div>
<section class="banner qa-banner-container homepage-widget-wrapper widget-container-spacing homepage-widget-wrapper--no-side-margins" style="">
<div class="sitewidth">
<div class="col">
<div class="qa-banner-container banner-container">
<div class="sitewidth banner-widget__layout carousel-widget-1-background" style="flex-direction: column">
<div class="banner-widget__contents" style="padding-bottom: 0px">
<div class="text-left custom-left">
<h2 class="widget__heading" style="">
  Header Text Goes Here
</h2>
</div>
<div style="">
<p class="text-left custom-left">
  H2 Text Goes Here
</p>
</div>
<div class="text-left banner-widget__button">
<a href="Insert URL Here>Button Text Here</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="widget-container widget-container--banner carousel-widget-2">
<div class="widget-placeholder">
<div>
<section class="banner qa-banner-container homepage-widget-wrapper widget-container-spacing homepage-widget-wrapper--no-side-margins" style="">
<div class="sitewidth">
<div class="col">
<div class="qa-banner-container banner-container">
<div class="sitewidth banner-widget__layout carousel-widget-2-background" style="flex-direction: column">
<div class="banner-widget__contents" style="padding-bottom: 0px">
<div class="text-left custom-left">
<h2 class="widget__heading" style="">
  Header Text Goes Here
</h2>
</div>
<div style="">
<p class="text-left custom-left">
H2 Text Goes Here
</p>
</div>
<div class="text-left banner-widget__button">
<a href=”Insert url Here">Button Text Here</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="widget-container widget-container--banner carousel-widget-3">
<div class="widget-placeholder">
<div>
<section class="banner qa-banner-container homepage-widget-wrapper widget-container-spacing homepage-widget-wrapper--no-side-margins" style="">
<div class="sitewidth">
<div class="col">
<div class="qa-banner-container banner-container">
<div class="sitewidth banner-widget__layout carousel-widget-3-background" style="flex-direction: column">
<div class="banner-widget__contents" style="padding-bottom: 0px">
<div class="text-left custom-left">
<h2 class="widget__heading" style="">
Header Text Goes Here
</h2>
</div>
<div style="">
<p class="text-left custom-left">
H2 Text Goes Here
</p>
</div>
<div class="text-left banner-widget__button">
<a href="Insert url Here">Button Text Here</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<style>
.carousel-widget-1-background {
background: url(Insert Image Here);
background-position-x: center;
}
.carousel-widget-2-background {
background: url(Insert Image Here;
background-position-x: center;
}
.carousel-widget-3-background {
background: url(Insert Image Here;
background-position-x: center;
}
#carousel
> div.widget-container.widget-container--banner
> div
> div
> section
> div
> div
> div
> div
> div
> div
> h2 {
padding-left: 0;
}
#carousel > div.widget-container.widget-container--banner {
height: 310px;
background-size: cover;
background-repeat: no-repeat;
}
#carousel
> div.widget-container.widget-container--banner
> div
> div
> section
> div
> div
> div
> div
> div {
float: left;
}
#carousel > div.widget-container.widget-container--banner > div > div > section > div > div > div > div{
align-items: flex-start;
height: 310px;
}
#carousel
> div.widget-container.widget-container--banner
> div
> div
> section
> div
> div
> div
> div
> div.banner-widget__contents {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 17px;
width: 50%;
justify-content: center;
}
#carousel
> div.widget-container.widget-container--banner
> div
> div
> section
> div
> div
> div
> div
> div.banner-widget__contents
> div
> h2 {
color: #000;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 47.949px; /* 149.841% */
margin: 0;
}
#carousel
> div.widget-container.widget-container--banner
> div
> div
> section
> div
> div
> div
> div
> div
> div
> p {
color: #000;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 150%;
margin: 0;
}
#carousel
> div.widget-container.widget-container--banner
> div
> div
> section
> div
> div
> div
> div
> div
> div.text-left.banner-widget__button.carousel-button {
max-width: 30%;
margin: 0;
}
div.text-left.banner-widget__button.carousel-button > a {
font-size: 20px;
font-weight: 400;
line-height: 20px;
height: 150%;
margin: 0;
align-content: center;
}
/* Container for the carousel */
#carousel {
position: relative;
width: 100%; /* or set to a specific width */
height: 310px; /* Adjust based on the height of your banners */
overflow: hidden;
}
/* Make sure each banner takes up 100% width of the container */
#carousel > div.widget-container--banner {
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 310px;
opacity: 0;
transition: opacity 2s ease-in-out, left 2s ease-in-out;
}
/* The active banner */
#carousel > div.widget-container--banner.active {
left: 0;
opacity: 1;
}
/* Optional: Styling for individual banners */
/*#carousel > div.widget-container--banner img {
width: 100%;
height: auto;
object-fit: cover; Ensure images fill their container without stretching
}*/
#carousel
> div
> div
> div
> div
> section.banner.qa-banner-container.homepage-widget-wrapper.widget-container-spacing.homepage-widget-wrapper--no-side-margins {
height: 310px;
display: flex;
flex-direction: column;
justify-content: center;
}
.text-left.custom-left {
max-width: 80%;
}
@media only screen and (min-width: 668px) and (max-width: 1000px) {
#carousel
> div.widget-container.widget-container--banner
> div
> div
> section
> div
> div
> div
> div
> div
> div
> p {
max-width: 70%;
}
}
@media only screen and (max-width: 834px) {
#carousel
> div.widget-container.widget-container--banner
> div
> div
> section
> div
> div
> div
> div
> div
> div
> p {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
#carousel
> div.widget-container.widget-container--banner.carousel-widget-2.active
> div
> div
> section
> div
> div
> div
> div
> div
> div
> h2 {
color: #000;
font-size: 28px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 171.246% */
}
}
@media only screen and (max-width: 600px) {
.text-left.custom-left {
max-width: 75%;
}
}
</style>
<script>
function createCarousel() {
// Target the widget containers (banners)
const banners = document.querySelectorAll(
"#carousel > div.widget-container--banner"
);
let currentIndex = 0;
banners.forEach((banner, index) => {
banner.classList.remove("active");
if (index === currentIndex) {
banner.classList.add("active");
}
});
function showNext() {
banners[currentIndex].classList.remove("active");
currentIndex = (currentIndex + 1) % banners.length;
banners[currentIndex].classList.add("active");
}
// Set up an interval to automatically show the next banner every 4 seconds
setInterval(showNext, 5000); // 5000 milliseconds = 5 seconds
}
// comment out bellow to stop carousel and edit the banners
document.addEventListener("DOMContentLoaded", createCarousel);
</script>

mitchell.gordon
Helper ⭐️⭐️
Forum|Forum|10 days ago
November 12, 2025

@aluciani I sent the code, but it got blocked by filters. After someone reviews, it I hope it serves your community well. Please let me know if youd like to discuss anything else!

aluciani
Author
Helper ⭐️
Forum|Forum|10 days ago
November 12, 2025

Thanks for sharing @mitchell.gordon 👍

I’ll let you know once I see it.

Maybe @revathimenon might be able to approve.

mitchell.gordon
Helper ⭐️⭐️
Forum|Forum|10 days ago
November 12, 2025

Thanks for sharing @mitchell.gordon 👍

I’ll let you know once I see it.

Maybe @revathimenon might be able to approve.

There will be a handful of code changes required. I tried to mark each one of them with Text Like This

Most will be a H1, H2, Image and button text. Happy to meet quick to go over it with you if needed!

aluciani
Author
Helper ⭐️
Forum|Forum|10 days ago
November 12, 2025

Sounds good I will keep you posted @mitchell.gordon 👍

dawn.wayland
Contributor ⭐️⭐️⭐️
Forum|Forum|10 days ago
November 12, 2025

@mitchell.gordon would you mind sharing the code with me too, please? I would like to do the same.

mitchell.gordon
Helper ⭐️⭐️
Forum|Forum|10 days ago
November 12, 2025

@mitchell.gordon would you mind sharing the code with me too, please? I would like to do the same.

I tried to share the code here but it got blocked. Once its approved, it will be here!

mitchell.gordon
Helper ⭐️⭐️
Forum|Forum|8 days ago
November 14, 2025

@dawn.wayland @aluciani please see above. I hope this helps you fulfill your community goals!

Let me know if you have any questions!

Didn't find what you were looking for?

Sign up

Welcome to the Gainsight Community

Scanning file for viruses.

This file cannot be downloaded