2 basic repeaters that communicate the same DataItemIndex

Question

I have the same data source for 2 basic repeaters, and in the first repeater I have is over items of the data source, showing only the title and date of the items, I want whenever a user slide to a certain item, the text field of this item will be shown in the second repeater. how can I know the selected item index of first repeater and access it in the second repeater?

here's a picture of the design

Answer 1

In Kentico, you can use <%# DataItemIndex %> to render current item index. So in your repeater template, you can render specific classes for your items.
For example, 1st repeater item template:

<div class='slide-top-item slide-<%# DataItemIndex %>'>...</div>

2nd repeater item template:

<div class='slide-content-item slide-<%# DataItemIndex %>'>...</div>

And when a user slides to a certain item, you can change text using javascript by finding an element with specific CSS class.

Answer 2

We use the Owl carousel in a lot of projects and have a similar setup for paging. In your case, I think the title and date of the items would be the pager and the "selected index" would be the actual items.

WIth this you can take advantage of the <%# DataItemIndex %> to set a data attrubute on each element and let the owl carousel paging do the rest of the work for "selecting" and displaying the selected item.

See cross post here.