How to use data attributes to override Swiper parameters

[pryley]

In this example I have set a parameter object to the data-options attribute on the .swiper element:

<div class="swiper" data-options='{"loop":true,"spaceBetween":20}'>
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

let swiper = new Swiper('.swiper', {
    on: {
        beforeInit: function () {
            this.params = Object.assign(this.params, JSON.parse(this.el.getAttribute('data-options')) || {})
        },
    },
    spaceBetween: 16, // we are overriding this option
})