So yeah, looking at that post, if you are doing two sliders on the same page, you would need to have different id’s for each, you can only have one id on a page technically. If you are putting it on multiple pages, you can be fine as is.

/** Begin Slider **/
/** This is the timing of the animated images. **/
/** These will need to be adjusted if you change the total number. **/
#doc-page-96
@keyframes slide {
  0% { left: 0%; }
  28% { left: 0%; }
  33% { left: -100%; }
  62% { left: -100%; }
  66% { left: -200%; }
  96% { left: -200%; }
  100% { left: -300%; }
  }

/** This block helps use the whole widget and keeps out scroll bars. **/

  #bannerSlider { 
    width: 100%;
    overflow: hidden; 
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It needs to correspond with the number of images you have. **/

  figure.slider { 
    position: relative;
    width: 400%;
    animation-name: slide; 
    animation-duration: 30s;
    animation-iteration-count: infinite;
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It should represent a fraction of the whole for each image. **/
/** Ex. 5 images - each image is 20 % **/

  figure.slider figure { 
    width: 25%;
    height: auto;
    display: inline-block; 
    position: inherit; 
  }

/** This block refers to each image. **/

  figure.slider img { 
      width: 100%;
      height: auto;
  }

/** This block formats the label caption at the bottom **/
/** You could tweak the colors and font as desired **/

  figure.slider figure figcaption { 
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    color: #ffffff;
    width: 100%;
    font-size: 32px;
    padding: 10px; 
  }
  /** End Slider **/

This is the CSS I have (thank you @gtstanger) do I need to assign it to a page? .. Okay do I need to assign it to a page… 

#doc-page-96 < DO I NEED TO ADD THIS>

<div id="bannerSlider">
	<figure class="slider">
<figure>
<a href="https://www.eventlink.com/1/”>
<img src="https://cdn5.dcbstatic.com/files/p/l/site_docebosaas_com/userfiles/13034/10.44 In-Person Event.png" alt=“Flyer for the Event” />
</figure>
<figure>
<a href="https://www.eventlink.com/2/”>
<img src="https://cdn5.dcbstatic.com/files/p/l/site_docebosaas_com/userfiles/13034/10.55 event work hour.png" alt=“Flyer for the workshop.” />
</figure>
<figure>
<a href="https://www.eventlink.com/3/”>
<img src="https://cdn5.dcbstatic.com/files/p/l/site_docebosaas_com/userfiles/13034/10.45 PML event.png" alt=““Flyer for the Event />
</figure>
<figure>
<a href="https://www.eventlink.com/3/”>
<img src="https://cdn5.dcbstatic.com/files/p/l/site_docebosaas_com/userfiles/13034/10.44 PML Mid-year Event.png" alt=“Flyer for the Event” />
</figure>
</figure>
</div>

^ This is a version of the HTML (I modified the link and alt txt and links…), I’m posting in the widget… The Images aren’t showing… and only the <a href remain after I press save and edit again. In the viewer this section is showing up blank… I added the text “Slider should show here” and saved it so I could catch the screenshot

I imagine it’s something wrong with my html code… :( 

Any ideas? 

/** Begin Slider **/
/** This is the timing of the animated images. **/
/** These will need to be adjusted if you change the total number. **/
#doc-page-96
@keyframes slide {
  0% { left: 0%; }
  28% { left: 0%; }
  33% { left: -100%; }
  62% { left: -100%; }
  66% { left: -200%; }
  96% { left: -200%; }
  100% { left: -300%; }
  }

/** This block helps use the whole widget and keeps out scroll bars. **/

  #bannerSlider { 
    width: 100%;
    overflow: hidden; 
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It needs to correspond with the number of images you have. **/

  figure.slider { 
    position: relative;
    width: 400%;
    animation-name: slide; 
    animation-duration: 30s;
    animation-iteration-count: infinite;
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It should represent a fraction of the whole for each image. **/
/** Ex. 5 images - each image is 20 % **/

  figure.slider figure { 
    width: 25%;
    height: auto;
    display: inline-block; 
    position: inherit; 
  }

/** This block refers to each image. **/

  figure.slider img { 
      width: 100%;
      height: auto;
  }

/** This block formats the label caption at the bottom **/
/** You could tweak the colors and font as desired **/

  figure.slider figure figcaption { 
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    color: #ffffff;
    width: 100%;
    font-size: 32px;
    padding: 10px; 
  }
  /** End Slider **/

You only need to add the page specific tags if you are making changes to the core info that would vary page to page, and we generally do that when we can’t control the elements fully, you can in this case so probably not needed. In your case based on the post after this, the id of your carousel is <div id="bannerSlider">

So if you wanted two on the same page, that ID should be updated to something else. If you are putting one on multiple pages, you don’t need to touch it unless you want the style to be different on each page.

As for the pictures, the links you have in the URL are 404 for me, so I’d assume they are not right. If it was a rights issue it would be a different code. Make sure you can get just to the link as first troubleshooting step, i.e. just try to navigate to https://cdn5.dcbstatic.com/files/p/l/site_docebosaas_com/userfiles/13034/10.44 PML Mid-year Event.png

For me, it is a 404.

Okay I got some of them to show with an alteration to the HTML …. but the clickable links aren’t working… :(

Can’t help/advise without seeing...