Swiper slide with active class repeat id used for detail region

[pixlapps]

Is there a way to use, for example the id value when using dynamic slides inside swiper component.

Example:

I have a swiper component that uses a query to generate cards.
Slide 1 has dynamic id = 1 from db, slide 2 = 2 and so forth if they aren’t sorted.
When slide 2 get’s the active class meaning it is “centered” in the swiper(does not have “previous” or “next” classes that is), I should be able to use this id = 2 in detail region or var is also fine.
So as I swipe the “main” card will effect what shows in detail region or just change the var value so I can use it in other query.

All this without clicking or tapping, just because swiper adds active class to the “inview” slide

Hope that makes sense @Teodor and @George

[Teodor]

The swiper component does not currently include any dynamic events like on slideChange so it cannot update the activeIndex in a variable currently.

Maybe @patrick can add this in the next updates.

I see that you are extensively using the Swiper in your projects, maybe you can create a list of nice features to be added to Wappler for the Swiper so we can integrate them

[pixlapps]

slideChange as per above port and mySwiper.destroy would be a good start please.

[patrick]

You want to have a detail region with the data from the active slide?

lets say you named your swiper swiper1 and your database data is db.data. You set the Slides Source of the swiper to db.data. You can get the index of the active slide with swiper1.index. You can now get the id as db.data[swiper1.index].id.

At this moment it is not possible to pick the index property of the swiper with the data picker in the UI.

Properties available on the swiper are:

index - index of currently active slide
total - total number of slides
isBeginning - true if slider on most “left”/“top” position
isEnd - true if slider on most “right”/“bottom” position

[pixlapps]

Thanks! This helps a lot! Will give it a go. Appreciate.

[pixlapps]

Works like a charm, thanks @patrick!

[pixlapps]

@patrick Another Swiper request:

Have the slides view options as dynamic so you can change with variable values for instance slides per view and space in between.

Trying to make a type of morphing slide that becomes the background for an insert screen popup. And this might help me get there. Not sure it will work, but if not too much trouble it can be an option others might also appreciate.

Thanks

[patrick]

Most component and html attributes can be made dynamic. For example you have loop="true", you make it dynamic by adding dmx-bind: in front of it. So dmx-bind:loop="query.loop == '1'" will set loop to true when the page has loop=1 in the querystring. This works for most attributes.

[pixlapps]

aaaah! Of course. I did try using something like loop="{{var_loop.value}}" and without brackets, but the dmx-bind: was missing. Making a mental note… NOW!

Thanks @patrick!

[dogpoint]

Hi @patrick

Just trying to replicate this, I have a swiper and I would like to set the id for a data detail based on the image_id from the slide, I did it like you advised but it always returns 1 instead of the image_id.

Both the swiper and datadetail have the same source and key of course:

Result:

The guid on the right belongs to id 1 on the database.

Any idea where did I get lost?

Gabor

[dogpoint]

@patrick or @Teodor could you help please, I still couldn’t figure this out.

Many thanks!
Gabor