Hey Guys...hoping there might be a simple or even creative way to accomplish a slider with content row overlay design.
On this page you can see we have a nectar slider with 4 slides and below it a row with a carousel with 4 slogan which overlaps the slider (accomplished with a -20% top margin setting set on the 2nd row).
We love how this looks and adjusts responsively, however we need to sync the slider and the slogans to match up and change when it autorotates or the user clicks one of the radio buttons. While I know this might not be build quite right I figure with the power of salient theme and all its functionalities there might be a way to do this. So I'm wondering if we could accomplish this by:
1. Nectar Slider / Carousel - Is there a way through an extra class or some other method that a carousel COULD trigger a nectar slide movement so we could sync nectar slide 1 and carousel content 1, nectar slide 2 and carousel content 2...and so on?
2. Carousel - Simple Slider / Row Re-order - Is there a way to re-order rows the way you can reorder columns using the Z-index function and simply use the carousel's simple slider element push the column down over the next row like I've tried to do here: https://www.taylorderrick.com/development/home-2/
3. Nectar Slider Heading /Captions - Perhaps trying to add the colored box into the slider by way of adding it directly to the slider?
4. Another Way - Is there another Salient Element, or an altogether better way that we could use to accomplish this such as adding a colored row
As always, thanks in advance for this great theme and all your assistance!
Unfortunately, we currently don't have a way to use a carousel to trigger a nectar slider.
A workaround would be to Bind a click event on .flickity-page-dots li' and use the index to trigger a click event on a nectar slider pagination.
This would require some extensive customization which I'm afraid we are not able to offer due to support scope limitations.
However, we are partnered with a trusted provider of expert-level Salient customization. If you are interested in initiating a project, we recommend referring to our guide at the following link: https://themenectar.com/salient/customization/
In the meantime, please don't hesitate to reach out with further questions. We're happy to help.
Thank you Judith. Understand you can only do so much, but appreciate the advise and I'll reach out to the developer I hired through your network to see if he can look into it.
I am curious however about the z-index of the rows. While I know you can set the z-axis of columns is there a way you can do this with ROWS? Seems like by default the lower down the page the row is the higher its z-index is? Any way to control this?
So then, if I can change the z-index for each row then help me understand. On this page, I have the top rows z-index set to 10, and the seconds row z-index set to 5. So why doesn't the top row (which has an inner column margin set to 50% to overlap the row below) appear on top of the 2nd row thus appearing like the translucent blue box on this page?
Hey Guys...hoping there might be a simple or even creative way to accomplish a slider with content row overlay design.
On this page you can see we have a nectar slider with 4 slides and below it a row with a carousel with 4 slogan which overlaps the slider (accomplished with a -20% top margin setting set on the 2nd row).
We love how this looks and adjusts responsively, however we need to sync the slider and the slogans to match up and change when it autorotates or the user clicks one of the radio buttons. While I know this might not be build quite right I figure with the power of salient theme and all its functionalities there might be a way to do this. So I'm wondering if we could accomplish this by:
1. Nectar Slider / Carousel - Is there a way through an extra class or some other method that a carousel COULD trigger a nectar slide movement so we could sync nectar slide 1 and carousel content 1, nectar slide 2 and carousel content 2...and so on?
2. Carousel - Simple Slider / Row Re-order - Is there a way to re-order rows the way you can reorder columns using the Z-index function and simply use the carousel's simple slider element push the column down over the next row like I've tried to do here: https://www.taylorderrick.com/development/home-2/
3. Nectar Slider Heading /Captions - Perhaps trying to add the colored box into the slider by way of adding it directly to the slider?
4. Another Way - Is there another Salient Element, or an altogether better way that we could use to accomplish this such as adding a colored row
As always, thanks in advance for this great theme and all your assistance!
Hello Eric,
Thanks for writing to us.
Unfortunately, we currently don't have a way to use a carousel to trigger a nectar slider.
A workaround would be to Bind a click event on .flickity-page-dots li' and use the index to trigger a click event on a nectar slider pagination.
This would require some extensive customization which I'm afraid we are not able to offer due to support scope limitations.
However, we are partnered with a trusted provider of expert-level Salient customization. If you are interested in initiating a project, we recommend referring to our guide at the following link: https://themenectar.com/salient/customization/
In the meantime, please don't hesitate to reach out with further questions. We're happy to help.
Thank you Judith. Understand you can only do so much, but appreciate the advise and I'll reach out to the developer I hired through your network to see if he can look into it.
I am curious however about the z-index of the rows. While I know you can set the z-axis of columns is there a way you can do this with ROWS? Seems like by default the lower down the page the row is the higher its z-index is? Any way to control this?
Hi Eric,
Thank you for getting back to us.
You can change the z-index for each row in the row settings as shown in this screenshot.
Try this and let us know how it goes.
Regards,
Thanks Andrew.
So then, if I can change the z-index for each row then help me understand. On this page, I have the top rows z-index set to 10, and the seconds row z-index set to 5. So why doesn't the top row (which has an inner column margin set to 50% to overlap the row below) appear on top of the 2nd row thus appearing like the translucent blue box on this page?
Thanks again for help in understanding this.
Hey Again,
Could you remove the maintenance mode so we can check.
Best,
ThemeNectar Support Team
Apologies Tahir, this is now available to view.
THANK YOU!
Hi Eric,
Thank you for getting back to us.
.It seems to still be in maintenance mode.
We look forward to your reply.
Kind regards,
Hey Again,
Both pages have different html div structures which is why the blue box is not able to overlap the outer divs. This should help: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index .
Best,
ThemeNectar Support Team