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
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
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
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.
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.
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!
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.
