Take data-caption and add value to div outside of swiper-wrapper

[moy-fostr]

Hi there,

I want to add captions to my carousel but not display them over the images. Rather display them to the side, seemingly (visually) outside of the carousel. Attached an image of the desktop layout for reference.

I have the layout and the fraction pagination working with Swiper. But I was wondering on the best way to position (and fade on change) a caption. I thought about absolute/fixed position but overflow: hidden would prevent that.

What if I add a data-caption to my slide (image) container then add that to a div outside of <div class="swiper-wrapper"> - is that possible? Markup being something like: <div class="swiper-slide" data-caption="Name of project 1">

Then adding the caption to a div outside like: `

My current Swiper script looks like this:

<script>
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 30,
      effect: "fade",
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      pagination: {
        el: ".swiper-pagination",
        type: "fraction",
      },
    });
  </script>

As an aside, when you click and drag on desktop slowly and the image slowly morphs to the next. Is the default functionality or is it possible to disable and just change slide as if you like prev/next arrows?

Really appreciate some help if this isn't ludicrous!

Thanks,
Steve