How to create a Swiper where the slides are based on a repeat?

Wappler General How To
#1

Hi,

I’m looking to create a swiper where the number of images and the src for each image is based on a loop through an array.

  • The array would look like: [‘assets/1.jpg’, 'assets/2.jpg, ‘assets/3.jpg’]
  • I would want a swiper with 3 images, corresponding to the 3 in the array

How would I do that? I just wrote this to try it out (just repeating the same image 3 times)

        <div is="dmx-swiper" id="swiper3">
            <div dmx-repeat:repeat3="3">
                <div class="swiper-slide"><img src="assets/img/food-4.jpg" width="100%"></div>
            </div>
        </div>

But this is what I get instead. 3 photos side by side instead of a swiper.
image

How to conditionally remove/suppress lines from imaged source?
#2

There is a slide source option in the Swiper UI for dynamic slides, please use it to select your dynamic data.

#3

Thanks for the reply @Teodor!

Could you please elaborate a bit more or would you have an example?

  • What should I put under the ‘Slide Source’? An array of src such as '[‘assets/1.jpg’, ‘assets/2.jpg, ‘assets/3.jpg’]’?
  • What should I add inside the ‘Swiper’? Swiper > Slide > Image?

Thanks
Oliver

#4

Put your data source - a database query or any other data source, returning an array.

Depends on what you want to achieve. If you want to show an image in each slide then yes, that’s the correct structure.

#5

Oliver
Did you get this working?
I’ve spent a bit of time on this today - guess I’m having trouble determining EXACTLY what an array is and what it looks like.
And if your array needs to be converted to a JSON array for Swiper/Lightbox to properly use it.
And there’s a question of the datatype in the Database Manager - does that column need to be marked as a JSON Array? or can it remain Text?