CSS for a full-width banner carousel

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 */

Thank you! This was very helpful! 

​@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.

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

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>