2 native sliders on one page

[cvdw]

It seems that 2 native sliders on 1 page don’t go together. If I use an inline slider with scrolling text in the header and open a gallery on the page in a slider in a modal (following Josh Donnelly’s tutorial Image lightbox for your ACF Galleries - Cornerstone Modal Element https://youtu.be/ASv_W7z74C4?si=2OVk0RC6WsuJchsZ ) Then the slider no longer opens with the selected photo but always with the first one.

See this example with the scrolling text slider in the header:
https://cresult.nl/valk/project/woonhuis-blaricum/

And this example without the header where the modal slider opens with the correct photo:
https://cresult.nl/.../bobbies-bar-hotel-de-cantharel/

I’ve searched a lot and tried a lot, but I can’t figure out why the right photo doesn’t open when there are 2 sliders on a page…

(this is just a development site)

And here an other example: https://lapauline.nl/wp/lunch-bruiloft-responsive/

in the first album, the clicked photo opens with the right photo in de modal slider, in the second, it opens with the first photo. As soon I delete the first slider, the second opens with the right photo.

[ruenel]

Hey @cvdw,

Thanks for writing in! You should be adding a data-x-slide-context attribute to the Column element containing each of those sliders on the page.

Kindly let us know how it goes.

[cvdw]

Hi and thank you but after reading all docs about the custom attributes, it’s not completely clear to me.

The text slide in my header has this structure:

Bar

Container

Slide container

Slide 1

Slide 2

Slide 3

Slide 4

And in the page it is in a modal to open the slideshow in a image lightbox like in the video tutorial of Josh Donnelly:

Section

Row

Column

Modal

Slider (stacked)

Content Wrapper

Slide container

Slide

Where do I place the custom attribute data-x-slide-context in this case and do I have to it a Value?

[cvdw]

I tried to put data-x-slide-context in the custom attribute of the both Slide containers but that doesn’t make any difference.

[ruenel]

Hello @cvdw,

The data-x-slide-context should be added to the Bar > Container element and also in the Column element.

Kindly let us know how it goes.

[cvdw]

@ruenel

data-x-slide-context

Hi,

I did now but the still the first photo is opening in the modal slider insteat of the clicked one…

See this one for example: https://cresult.nl/valk/project/royal-family-suite-van-der-valk-zuidbroek/

[ruenel]

Hello @cvdw,

It appears that it is not just two but four Sliders on the page.

I already added data-x-slide-context to all the containers and the issue isn’t resolved. I believe that this is a bug. I am reporting this to our Developers for further investigation.

Please bear with us.

[cvdw]

Hi,

I’m sorry for the confusion but the others where hidden on al screens and only for test. I deleted those in the header so now there in only 1 slider in the header and one in the modal on the Single layout but still the fist photo is always opening,

Carel

[ruenel]

Hello Carel,

Be it hidden or not, as long as there are more than 2 sliders on the page, the custom navigation will not work. I was able to replicate the issue on our local testing server. We will discuss this with our developers.

Thank you for your understanding.

[cvdw]

Hi,

Here is just an example with 2 sliders on a page and data-x-slide-context set to the column.
Here in the first slider, the photo what is clicked opens in the lightbox, on the second always the first photo opens in the lightbox.

https://lapauline.nl/wp/2-sliders/

[ruenel]

Hello Carel,

Our developers are still investigating this issue. A patch release will be rolling out that may include a fix for this issue.

Please bear with us. Thanks.