Apply caption/text to a container outside of JS carousel using data attr?

I have a carousel, currently Keen Slider JS – open to changing if what I’m after is easier to achieve with another plugin or simple/custom JS.

Basically I want a simple fading carousel that autoplays and loops (might add left/right arrows later), has a caption for each slide and numbered fraction pagination. For example “1 / 5” to indicate what slide we’re on.

Due to my layout (see CodePen) I thought might be best achieved using a data attribute as I want to display the caption and pagination outside/way from the carousel. Ideally the text fading slightly as it changes.

Open to other solutions but this is the only way I could think of it working with the caption outside of the slider/plugin?

I have added my code into the post but it doesn’t display very well so it might be best checking the CodePen: https://codepen.io/moy/pen/KKywKXN

Also, if you spot my really high value of 5000000 for the duration of the fade …it doesn’t seem to do anything no matter what value I add? Any idea why?

Thanks in advance!

var slider = new KeenSlider("#my-keen-slider", {
   loop: true,
   defaultAnimation: {
      duration: 500000
   },
   detailsChanged: (s) => {
      s.slides.forEach((element, idx) => {
         element.style.opacity = s.track.details.slides[idx].portion
      })
   },
   renderMode: "custom"
})

html {
  background: white;
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: white;
  -webkit-text-size-adjust: 100%;
}

/**
 * Base `body` styling.
 */
 
body {
  background-color: transparent;
  color: black;
  font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
}

h1 {
  font-size: 3.6rem;
  font-weight: inherit;
  line-height: 1;
  margin: 0 0 24px;
  padding: 0;
}

p {
  margin: 0 0 24px;
  padding: 0;
}

img {
  border: 2px solid black;
  height: auto;
  max-height: 100%;
  width: auto;
  max-width: 100%;
}

.grid__item {
  box-sizing: border-box;
  padding: 24px 24px 0;
}

.gallery {
  box-sizing: border-box;
}

.grid__item-footer {
  display: flex;
  margin-top: auto;
}
.grid__item-footer p {
  display: flex;
  align-items: center;
  flex: 1 1 0%;
}

.grid__item-footer .align-right {
  justify-content: flex-end;
}

@media only screen and (min-width: 1000px) {
  .grid {
    background-color: black;
    display: grid;
    grid-column-gap: 2px;
    grid-template-columns: repeat(12, 1fr);
    height: 100vh;
    margin: 0 64px;
  }

  .grid__item {
    background-color: white;
    display: flex;
    flex-direction: column;
    grid-column: span 6;
    height: 100vh;
  }

  .grid__item-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin-bottom: 24px;
    overflow: hidden;
    width: 100%;
  }

  .grid__item-main--gallery {
    box-sizing: border-box;
    align-items: center;
    justify-items: center;
    align-self: center;
    justify-self: center;
    text-align: center;
    overflow: hidden;
  }

  .gallery {
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
  }

  .gallery__inner {
    box-sizing: border-box;
    height: 100%;
    width: auto;
  }

  .grid__item-footer {
    border-bottom: 2px solid black;
    box-sizing: border-box;
    height: 64px;
    padding: 0 24px;
    position: fixed;
    bottom: -64px;
    left: 0;
    transform: rotate(-90deg);
    transform-origin: top left;
    width: 100vh;
  }
  .grid__item-footer p {
    margin-bottom: 0;
  }

  .grid__item--gallery {
    padding: 24px;
  }
  .grid__item--gallery .grid__item-main {
    height: 100%;
    margin-bottom: 0;
  }
  .grid__item--gallery .gallery {
    height: 100%;
  }
  .grid__item--gallery .grid__item-footer {
    left: auto;
    right: 0;
    transform: rotate(90deg);
    transform-origin: top right;
  }

  img {
    box-sizing: border-box;
    height: auto;
    max-height: 100%;
    width: auto;
  }

  img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: unset;
  }
}
/* Carousel CSS */
.fader {
  height: 50vw;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .fader {
    height: 300px;
  }
}
.fader__slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
}

.fader img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}

<script src="https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.js"></script>

<div class="grid grid--alt aspect">

  <div class="grid__item">

    <div class="grid__item-main">
      <h1 class="brand-name">Brand Name</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>

    <div class="grid__item-footer">
      <p class="contrast"><span class="contrast__switch"></span>Contrast</p>
    </div>

  </div>

  <div class="grid__item grid__item--gallery">

    <div class="grid__item-main">

      <div class="gallery">

        <div id="my-keen-slider">
          <div class="fader__slide keen-slider__slide" data-caption="product name 1" data-slide="1">
            <img src="https://www.fillmurray.com/900/1200" data-caption="product name 1" data-slide="1" />
          </div>
          <div class="fader__slide keen-slider__slide">
            <img src="https://www.fillmurray.com/g/900/1200" data-caption="product name 2" data-slide="2" />
          </div>
        </div>

        <div class="grid__item-footer">
          <p>Name of Project</p>
          <p class="gallery-count align-right"><span class="current">1</span>&nbsp;/&nbsp;2</p>
        </div>

      </div>