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.

[tristup]

Hi @daneruef,

Glad to know that you are able to figure it out. Regarding the parent height not adjusting to the absolutely positioned child elements , this would require some custom JavaScript to dynamically update the parent’s height based on the currently active child. Since this involves a custom implementation, it falls outside the scope of standard Theme Support . I would suggest you hire a developer who can assist you to do the customization or you can avail of our service called One, where we answer the questions beyond normal theme support.

Thanks