Skip to main content
Question

CSS for a full-width banner carousel

  • March 4, 2025
  • 6 replies
  • 347 views

SJSloan210
Novice III
Forum|alt.badge.img+1

Hello community!  I am looking for CSS code to set up a multi-image carousel or slider.  Does anyone have any sample CSS code for this that you can share?  Your assistance would be greatly appreciated.

 

Thank you.

6 replies

  • Novice III
  • 9 replies
  • March 4, 2025

I’ve used this one, it’s a five image carousel with a link in each image which we used to link to the course related to the image. As others in the community always say “make sure to test it out and ensure it doesn’t impact any other CSS you have” :)

HTML: 

<div id="automatic_slider">
<figure class="custom_slider">
<figure><a href="https://placeholder1.com"><img src="placeholder1.jpg" alt="Placeholder Image 1" width="1287" height="293" /></a></figure>
<figure><a href="https://placeholder2.com"><img src="placeholder2.jpg" alt="Placeholder Image 2" width="1287" height="293" /></a></figure>
<figure><a href="https://placeholder3.com" target="_blank" rel="noreferrer noopener"><img src="placeholder3.jpg" alt="Placeholder Image 3" width="1286" height="294" /></a></figure>
<figure><a href="https://placeholder4.com" target="_blank" rel="noreferrer noopener"><img src="placeholder4.jpg" alt="Placeholder Image 4" width="1287" height="293" /></a></figure>
<figure><a href="https://placeholder5.com" target="_blank" rel="noreferrer noopener"><img src="placeholder5.jpg" alt="Placeholder Image 5" width="1287" height="293" /></a></figure>
</figure>
</div>

CSS:

/* CUSTOM IMAGES SLIDER STARTS HERE */
#automatic_slider figure { margin: 0; background: #ffffff; }
div#automatic_slider { width: 100%; overflow: hidden; }
figure.custom_slider figure { width: 20%; height: auto; display: inline-block; position: inherit; }
figure.custom_slider img { width: 100%; height: auto; }
/* Images Caption settings */
figure.custom_slider figure figcaption { position: absolute; bottom: 0; background: rgba(0,0,0,0.4); color: #ffffff; max-width: 1390px; font-size: 18px; font-weight: 600; padding: 20px; }
/* Animation settings */
@keyframes slidy {
/* Slide 1 */
0% { left: 0%; }
20% { left: 0%; }
/* Slide 2 */
22% { left: -100%; }
40% { left: -100%; }
/* Slide 3 */
42% { left: -200%; }
60% { left: -200%; }
/* Slide 4 */
62% { left: -300%; }
80% { left: -300%; }
/* Slide 5 */
82% { left: -400%; }
100% { left: -400%; }
}
figure.custom_slider { position: relative; width: 500%; font-size: 0; animation: 40s slidy infinite; }
.custom_slider:hover { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; }
/* CUSTOM IMAGES SLIDER ENDS HERE */

 


gstager
Hero III
Forum|alt.badge.img+8
  • Hero III
  • 935 replies
  • March 4, 2025

 


averygrammel
Contributor III
Forum|alt.badge.img+2
  • Contributor III
  • 26 replies
  • March 10, 2025

Thank you! This was very helpful! 


dklinger
Hero III
Forum|alt.badge.img+11
  • Hero III
  • 1832 replies
  • March 11, 2025

@SJSloan210 - as needed - comslider may be a way for you to go as well. ​@gstager’s approach is a great way to go - but with a small budget - you can get comslider up and going nicely.


martiniwinski
Influencer II
Forum|alt.badge.img
  • Influencer II
  • 81 replies
  • June 24, 2025

I tried ​@JennaM_01 solution today and it works great! Thanks for posting :)


martiniwinski
Influencer II
Forum|alt.badge.img
  • Influencer II
  • 81 replies
  • July 3, 2025

I used Copilot AI to generate and tweak this HTML/CSS code for a 3-slide banner that fades between slides and allows for linking/clicking each banner. It’s a little smoother than the banner examples above and goes back to slide 1 from the end.

The banner pauses when the user hovers over it as well.

It works well for our purposes. Here’s the code:

/* CUSTOM IMAGES SLIDER(HOMEPAGE) STARTS HERE - FADE STYLE */

* {
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
}

.banner-container {
position: relative;
width: 100%;
max-width: 800px;
height: 400px;
margin: auto;
overflow: hidden;
}

.banner-container a {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
animation: fade 21s infinite;
transition: opacity 1s ease-in-out;
}

.banner-container a:nth-child(1) {
animation-delay: 0s;
}

.banner-container a:nth-child(2) {
animation-delay: 7s;
}

.banner-container a:nth-child(3) {
animation-delay: 14s;
}

.banner-container:hover a {
animation-play-state: paused;
}

    @keyframes fade {
      0%   { opacity: 0; z-index: 0; pointer-events: none; }
      5%   { opacity: 1; z-index: 1; pointer-events: auto; }
      30%  { opacity: 1; z-index: 1; pointer-events: auto; }
      35%  { opacity: 0; z-index: 0; pointer-events: none; }
      100% { opacity: 0; z-index: 0; pointer-events: none; }
    }


.banner-container img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

And here’s the HTML for the banner:

<div class="banner-container">
<a href="https://example.com/banner1" target="_blank">
<img src="https://via.placeholder.com/800x400/ff7f7f/333333?text=Banner+1" alt="Banner 1">
</a>
<a href="https://example.com/banner2" target="_blank">
<img src="https://via.placeholder.com/800x400/7fbfff/333333?text=Banner+2" alt="Banner 2">
</a>
<a href="https://example.com/banner3" target="_blank">
<img src="https://via.placeholder.com/800x400/7fff7f/333333?text=Banner+3" alt="Banner 3">
</a>
</div>