Swiper: set speed and data-swiper-autoplay to dynamic values

Wappler General How To
#1

Hey guys,

I have a responsive fullscreen swiper with a slides source set to a query.
Works fine, everything is cool.

I just thought that I could set the speed and the data-swiper-autoplay to dynamic values so I can modify them if needed without editing the sourse code of the page…

<div is="dmx-swiper" id="swiperBg" speed="dynamic_speed" effect="fade" autoplay="true" style="height: 100vh; width: 100vw; position: fixed; z-index: -1; top: 0; left: 0;" dmx-bind:slides="srvc_getSliders.data.qr_getSliders.sliders">
    <div class="swiper-slide" data-swiper-autoplay="dynamic_duration" dmx-style:background-image="'url(assets/images/' + sld_Picture + ')'"></div>
</div>

Is that possible in any way or I should just forget it?

Thanks in advance

#2

As any other attribute, you can make these dynamic by adding dmx-bind: in front of them.
Example:

dmx-bind:autoplay="dynamic_value"

dmx-bind:speed="dynamic_value"

autoplay expects a true/false 1/0 value and speed expects a numeric value in milliseconds.

1 Like
#3

Thanks brother!

That’s what I have done but without result…
But since you confirmed I checked and saw that I had my columns set to a string with the “ms” at the end and not a pure numeric value…

image
image774×200 15 KB

Removed the “ms” suffix from my db column value and works like a charm!
:+1:

1 Like