Swiper with dynamic image link

Hello,

I would like to populate up to 5 images from this query,

then I set the following code.

<div is="dmx-swiper" id="swiper1" speed="600" grab-cursor="true" loop="true" pagination="bullets" navigation="true" auto-height="true" centered-slides="true" dmx-bind:slides="serverconnect1.data.repeat1">
							<div class="swiper-slide">
								<img dmx-bind:src="serverconnect1.data.repeat1[0].filename" class="img-fluid">
							</div>
							<div class="swiper-slide">
								<img dmx-bind:src="serverconnect1.data.repeat1[1].filename" class="img-fluid">
							</div>
							<div class="swiper-slide">
								<img dmx-bind:src="serverconnect1.data.repeat1[2].filename" class="img-fluid">
							</div>
							<div class="swiper-slide">
								<img dmx-bind:src="serverconnect1.data.repeat1[3].filename" class="img-fluid">
							</div>
							<div class="swiper-slide">
								<img dmx-bind:src="serverconnect1.data.repeat1[4].filename" class="img-fluid">
							</div>
						</div>

But it didn’t work correctly.
Slide images are not in the swiper.

How can I solve this?

Thanks,

Well you only need ONE slide inside the dynamic swiper. It will be automatically repeated as many times as the records count is. Also the image src is wrong.
It must be something like:

<img dmx-bind:src="filename" ... 
1 Like

Thanks,

I changed what you pointed, now the swiper disappeared.

スクリーンショット 2020-08-01 16.17.59

Is this server action wrong?

Why did you create this repeat in the server action?
You only need the query and select this query as a dynamic data source for your swiper.

1 Like

ok, I deleted this repeat from the server action now. And I chose this query as a dynamic data source, but the swiper doesn’t appear yet. where should I investigate next?

Check the browser console for errors please

1 Like

now it worked as I expected. Thank you so much as always!!