Banner Slideshow Text Colour per slide

Site URL: https://www.acousticautomation.com.au/home

Hi all.

Really hoping someone can help me. I'm having some difficulties changing the text colour on specific slides of my banner slideshow.

https://www.acousticautomation.com.au/home
Slide 3 and 5 in particular need changing to a different colour.

I tried adding a card which didn't fit all the pages, changing location, etc. I can see plenty of info on changing colour in blocks of text, etc, but I can only get the section ID not the block ID for that slide's text.

Can anyone help me at all with this? It seems so damn basic, but I can't figure it out.
If at the same time you can get it to auto-transition across the banners - that would be appreciated but not necessary (I know theres code for it shown in search but haven't messed around with it as I am trying to get the font thing sorted first).

Thanks all!

6 hours ago, foosball89 said:

Site URL: https://www.acousticautomation.com.au/home

Hi all.

Really hoping someone can help me. I'm having some difficulties changing the text colour on specific slides of my banner slideshow.

https://www.acousticautomation.com.au/home
Slide 3 and 5 in particular need changing to a different colour.

I tried adding a card which didn't fit all the pages, changing location, etc. I can see plenty of info on changing colour in blocks of text, etc, but I can only get the section ID not the block ID for that slide's text.

Can anyone help me at all with this? It seems so damn basic, but I can't figure it out.
If at the same time you can get it to auto-transition across the banners - that would be appreciated but not necessary (I know theres code for it shown in search but haven't messed around with it as I am trying to get the font thing sorted first).

Thanks all!

Try adding to Home > Design > Custom Css to style for slide 3 and 5

/*slide 3*/
section[data-section-id="617fca1cbb575f156db3cad0"] li:nth-child(3) h2 {
	color: red;
}

section[data-section-id="617fca1cbb575f156db3cad0"] li:nth-child(3) p {
	color: red;
}

/*slide 5*/
section[data-section-id="617fca1cbb575f156db3cad0"] li:nth-child(5) h2 {
	color: red;
}

section[data-section-id="617fca1cbb575f156db3cad0"] li:nth-child(5) p {
	color: red;
}

Regarding the auto-scrolling for banners, you can try adding to Home > Settings > Advanced > Code Injection, choose Footer

<script>
	(function docReady(fn) {
	// see if DOM is already available
	if (document.readyState === "complete" || document.readyState === "interactive") {
		// call on next available tick
		setTimeout(fn, 1);
	} else {
		document.addEventListener("DOMContentLoaded", fn);
	}
})(() => {
	if (window.location == window.parent.location) {
		const reelControls = document.querySelectorAll('.desktop-arrows [aria-label *="Next"]');
        console.log('here');
		reelControls.forEach(reelControl => {
			(function reelTimer() {
				setTimeout(() => {
					reelControl.click();
					reelTimer();
				}, 2000); // change this value to change the speed
			})();
		})
	}
});
</script>

My testing result

Press 👍 or mark this answer as solution to help another one too

Mate - you bloody beauty. Thank you so much for assistance!