# Dynamically change content on the page based on the current data in the content slider

**URL:** <https://community.weweb.io/t/dynamically-change-content-on-the-page-based-on-the-current-data-in-the-content-slider/6438>\
**Category:** How do I?\
**Created:** [January 17, 2024, 10:20am UTC](https://community.weweb.io/t/dynamically-change-content-on-the-page-based-on-the-current-data-in-the-content-slider/6438 "2024-01-17T10:20:36Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![das\_aaronlein](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/das_aaronlein/32/7229_2.png) [@das\_aaronlein](https://community.weweb.io/u/das_aaronlein)\
**Post date:** [January 17, 2024, 10:20am UTC](https://community.weweb.io/t/dynamically-change-content-on-the-page-based-on-the-current-data-in-the-content-slider/6438/1 "2024-01-17T10:20:36Z")

</div>

Hey guys!

Currently I am trying to get a text outside of a content slider to display the current data displayed in the content slider.

Basically the data it should update every time I change the slide.

This text needs to be bound to the current data:  
 ![Bildschirmfoto 2024-01-17 um 11.17.39](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/4faec694f6d56897be3e2805b2a5d00ed24849c9.png)

How can I achieve this functionality? The copilot proposed that I could use the event “on slider change” and populate a variable with the current data, but in the workflow panel this event is not available.

Do you guys have any ideas?

Thank you!

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [January 17, 2024, 10:24am UTC](https://community.weweb.io/t/dynamically-change-content-on-the-page-based-on-the-current-data-in-the-content-slider/6438/2 "2024-01-17T10:24:57Z")

</div>

Can you show us your layout a bit more? It might be achieved with something else than a content slider

---

<div class="post-metadata">

**Author:** ![das\_aaronlein](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/das_aaronlein/32/7229_2.png) [@das\_aaronlein](https://community.weweb.io/u/das_aaronlein)\
**Post date:** [January 17, 2024, 10:38am UTC](https://community.weweb.io/t/dynamically-change-content-on-the-page-based-on-the-current-data-in-the-content-slider/6438/3 "2024-01-17T10:38:23Z")

</div>

Sure.

This is my layout:

 ![Bildschirmfoto 2024-01-17 um 11.32.02](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/34253ce3f5dd3a92494f00c217126d336cbf7c30.jpeg)

The slider changes in this screenshot the property in the background and all the related data.

Does this help?

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [January 17, 2024, 12:18pm UTC](https://community.weweb.io/t/dynamically-change-content-on-the-page-based-on-the-current-data-in-the-content-slider/6438/4 "2024-01-17T12:18:17Z")

</div>

Does the layout change on each slide, or does it stay the same with different links and logo?

---

<div class="post-metadata">

**Author:** ![das\_aaronlein](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/das_aaronlein/32/7229_2.png) [@das\_aaronlein](https://community.weweb.io/u/das_aaronlein)\
**Post date:** [January 17, 2024, 12:26pm UTC](https://community.weweb.io/t/dynamically-change-content-on-the-page-based-on-the-current-data-in-the-content-slider/6438/5 "2024-01-17T12:26:59Z")

</div>

The layout generally stays the same.  
The only thing that changes, is the amount and types of boxes (accordions) in the side menu.

Primarily though, it is about the Logo/ Links/ Text.

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [January 17, 2024, 12:41pm UTC](https://community.weweb.io/t/dynamically-change-content-on-the-page-based-on-the-current-data-in-the-content-slider/6438/6 "2024-01-17T12:41:06Z")

</div>

In that case, I would probably recommend using Tab element.

You can either:

- Have one tab element that has the whole layout for a slide
- Have multiple tab elements for background, top right card, bottom right card, etc linked to the same active index for better transitions

Have you tried our tab element?

---

<div class="post-metadata">

**Author:** ![das\_aaronlein](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/das_aaronlein/32/7229_2.png) [@das\_aaronlein](https://community.weweb.io/u/das_aaronlein)\
**Post date:** [January 17, 2024, 1:22pm UTC](https://community.weweb.io/t/dynamically-change-content-on-the-page-based-on-the-current-data-in-the-content-slider/6438/7 "2024-01-17T13:22:44Z")

</div>

So that the active tab fulfills the role of the active slide?  
Because I just looked into the tab element for this purpose and could not find the possibility to add tabs dynamically (which is possible using the content slider and necessary for the project:) )

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [January 17, 2024, 3:36pm UTC](https://community.weweb.io/t/dynamically-change-content-on-the-page-based-on-the-current-data-in-the-content-slider/6438/8 "2024-01-17T15:36:35Z")

</div>

How do you plan to dynamically populate the tabs? From a back-end?

---

<div class="post-metadata">

**Author:** ![das\_aaronlein](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/das_aaronlein/32/7229_2.png) [@das\_aaronlein](https://community.weweb.io/u/das_aaronlein)\
**Post date:** [January 17, 2024, 3:55pm UTC](https://community.weweb.io/t/dynamically-change-content-on-the-page-based-on-the-current-data-in-the-content-slider/6438/9 "2024-01-17T15:55:45Z")

</div>

Yes exactly! Using Xano.

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [January 17, 2024, 11:40pm UTC](https://community.weweb.io/t/dynamically-change-content-on-the-page-based-on-the-current-data-in-the-content-slider/6438/10 "2024-01-17T23:40:17Z")

</div>

Interesting, thanks for sharing the specifics.

We will think about adding the option to dynamically bind tabs.

In the meantime, I would advise trying to build without tabs or sliders, just binding to the XANO collection or having a variable of the active item

---

<div class="post-metadata">

**Author:** ![das\_aaronlein](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/das_aaronlein/32/7229_2.png) [@das\_aaronlein](https://community.weweb.io/u/das_aaronlein)\
**Post date:** [January 18, 2024, 8:40am UTC](https://community.weweb.io/t/dynamically-change-content-on-the-page-based-on-the-current-data-in-the-content-slider/6438/11 "2024-01-18T08:40:38Z")

</div>

Great, thanks Luka!
