Multiple dynamic Swiper JS slides on same page

Let’s say I have a custom CMS which allows me to add multiple slides on a page and each slide will have different options (slides to show at a time, slides to scroll, breakpoints, etc)

To my knowledge Swiper JS does not support data attributes in the slider HTML. It is something that needs to be implemented manually?

Im currently generating multiple slides on a page like this:

<div class="swiper" data-swiper='{"slidesPerView":3,"slidesPerGroup":3,"speed":300}}'>
    <div class="swiper-wrapper">
       <div class="swiper-slide">...</div>
       <div class="swiper-slide">...</div>
       <div class="swiper-slide">...</div>
    </div>
</div>

<div class="swiper" data-swiper='{"slidesPerView":1,"slidesPerGroup":1,"speed":800}}'>
    <div class="swiper-wrapper">
       <div class="swiper-slide">...</div>
       <div class="swiper-slide">...</div>
       <div class="swiper-slide">...</div>
    </div>
</div>

Then I use custom JS:

document.addEventListener('DOMContentLoaded', function () {
  const sliders = document.querySelectorAll('.swiper');

  sliders.forEach(slider => {
    const swiperOptions = JSON.parse(slider.getAttribute('data-swiper'));

    // Initialize Swiper instance
    new Swiper(slider, {
      ...swiperOptions,

This works. However is there a better more official way to handle multiple dynamic slides?