Add Swiper options to data attribute - adding 'renderBullet' not working

[r-interactive]

Hi,

I managed to add most of the swiper options to the html div under this custom data attribute:

data-swiper-timeline-options="{"direction":"vertical","autoHeight":false,"parallax":true,"speed":1600,"loop":false,"a11y":{"prevSlideMessage":"Previous slide","nextSlideMessage":"Next slide"},"autoplay":{"delay":5000,"disableOnInteraction":false,"pauseOnMouseEnter":true,"stopOnLastSlide":true},"breakpoints":{"768":{"direction":"vertical"}}}"
Screenshot:

I'm using js to parse it and the swiper slider/timeline is working.

I also want to add this to my custom data attribute. It's to display the year in the pagination:

pagination: { el: '.swiper-pagination', type: 'bullets', clickable: true, renderBullet: function(index, className) { var year = document.querySelectorAll('.swiper-slide')[index].getAttribute('data-year'); return '<span class="' + className + '">' + year + '</span>'; } }

Without 'renderBullet', I can add the other 'pagination' info (such as el, type and clickable) to my custom data attribute, but 'renderBullet' has a function, and I'm getting errors when I try to add that to 'data-swiper-timeline-options'.

Is there a way to add 'renderBullet' to html data attribute?

Thank you!