Change Background image with looper or stacked slider

[daneruef]

I have a mock up i’m trying to recreate.

I have an accordion set up currently and I want to change the background image with each corresponding button topic.

I had two ideas but cant seem to make either work.

The first being create two rows, one the accordion row that controls the other full screen slider row under itself. I just can not for the life of me get them to stack and be centered, as well as have the slider’s height flex to the size of the accordion.

Or alternatively is there a way to have the background image come from a looper provider and use the accordion as a control to show the proper looper item?

Website link - https://dxw.11d.myftpupload.com/

Thanks in advance.

[christian]

Hey @daneruef,

Regretfully, there’s no option to achieve what you need. This would require custom coding which we can provide with our One service. You can learn more about One here https://theme.co/one,

[daneruef]

I was able to achieved it by giving the parent div position:relative; and the children row position:absolute;
Then each accordion button i gave them custom attribute of “data-x-slide-goto”

I just can not figure out how to give the parent div height equal to the children elements.