Slider Navigation element help

[KEXINO]

Hi all,

I have a full-width (stacked) slider. Each slide has a row with 2 columns, and there are 6 slides in total.

I want to add a slide navigation element at the top level, but only over the second column. When I add it as a child of the Content Wrapper, the element spans the entire width of the (full-width) parent column.

I am able to add a Slide Nav element to the Column in the Row element, but of course that means I have to add a Slide Nav element to every slide in the slider stack (which makes it a pain to play around with margins, colors, etc.)

I tried positioning the Slide Nav element using Relative co-ordinates, but the Nav element doesn’t reflow with the column width.

What am I doing wrong?

[prakash_s]

Hello @KEXINO,

Thanks for writing to us.

In order to help you with your concerns, we need to check your settings. I would request please share the admin login details meanwhile, I would suggest you troubleshoot a few of the common issues before we investigate your settings. Please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin-level username and password
• Exact page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[KEXINO]

Thank you. login details are attached in the SN.

[ruenel]

Hello @KEXINO,

I am seeing this:

• See the secure note below

Here’s what we need from you:
1.) Please send us a mock layout design for slide 1
2.) A mock layout for slide 2 with the Slide Nav in view

We want to make sure to give you a more custom-tailored solution for your issue.

Best Regards.

[KEXINO]

Thanks @ruenel.

I’ve attached links to three annotated screenshots in a SN which will hopefully better clarify what I’m trying to do.

[ruenel]

Hey @KEXINO,

Here’s what you can do:
1.) Insert a DIV element next to the Slider Container.

2.) Add the Slide Navigation element inside the DIV element.

3.) Position the DIV as “Absolute” and put it in the bottom left of the Slide Container area:

4.) Set the minimum width of the DIV element to “50%”

And also make sure that when the Columns collapse in small screens, the minimum width will become “100%”

5.) Add some padding to both the Column 2 and the DIV element to give some space enough to display the Slide Navigation

I have created a demo here that you can check.

• See the URL in the secure note

Best Regards.

[KEXINO]

Thanks @ruenel this helped a lot. But there are still two issues:

1. Since each page of the slider varies in the amount of text, the height of some sliders are deeper than others. The slide navigation doesn’t take this into consideration, so sometimes the arrows are in the right place, while on other slides they obscure the text beneath

2. I’m trying to have the left arrow fixed to the left-hand edge of the second column, and the right arrow fixed to the right-hand edge (both with a touch of margin, to give them room). How can I do that?

Screenshots in SN

[christian]

Hey @KEXINO,

I checked the page done by Ruenel and it looks different than in your screenshot. But, it works. If that’s not the page you’re referring to, please follow the setup demo by Ruenel.

[KEXINO]

@christian you’re right. I think I had the element hierarchy set up incorrectly. Anyway, it seems to be working perfectly now. Thank you!

[tristup]

Hi @KEXINO,

Glad to know everything is working now.

Thanks