Convert Slider Navigation Dots to be Vertical - No Plugin - Elementor Wordpress Tutorial

Elementor's Slider Navigation Dots are always Horizontal. With some simple code - you can convert them to be vertical and on the left side of your screen.

Indeed we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)

Equipment Used:

-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)

PPPS: We only build with Elementor Pro

[logantate]

The little tips and tricks you share with us are outstanding. This is definitely being stored in the memory bank.

[kawtharmarhoon]

how about the slider sliding vertically from bottom to top instead of left to right ?

[martinblacklewis]

Kudos, bro! You saved me tons of time setting up other modules or absurd solutions with tons of code.

[GaryFMoody]

Great quick tutorial. Thanks. I would have loved to learn how you found the
{ }
I would need to bumble around with the view source code in a browser, etc. Maybe there is a better way?
Lastly, this is probably a newbie question that some will snicker at... We all need to learn.

[risingstars]

sir u really saved me, u r a genius as usual

[antonichristian]

great tip thanks.. but i also think it highlights some of elementors failings in general that it doesn't give users the fine grain controls that is needed in some widgets... how hard would be to add a vertical dots option?

[cluesarena]

Great to see you make videos on what is asked ❤️

Keep going

[Xanthi_S]

Wow, this is amazing 🤩 thanks for sharing. I’ll try it tomorrow 👌

[marinc]

thank you! But do you know how to do the exact same thing, but the scroll on the page must be vertical, not horizontal. ? Thanks

[PicSta]

Another great tip. Thanks for sharing it with us.

[danbeutler]

Hi dear @websquadron thank you for your awesome content. 🙏

I am currently trying to render the slider pagination outside of the slider in another container. That way it would be possible to do awesome custom slider designs and herosections.

Do you think its possible to display the pagination bullets in a div next to the slider and keep functionality? I just cant figure that out. 😢

[shapeaustralia]

is there a way to do this on the right instead of left?

Thanks :)

[moonzyuzy]

Will this code also work with the Gallery option instead of Slider? Thanks!

[imtiyazktm]

Could you please highlight changing the button position also? Thanks in advance.

[gufran-ansari]

Hello folks,

The slides have changed their code and it's not container in it now. Updated class below.

OLD
{

width: 0px !important;
margin-left: 20px !important;
bottom:45vh !important;
}

NEW

{

width: 0px !important;
margin-left: 20px !important;
bottom:45vh !important;
}

[mohsinworld]

Thanks. How to use custom CSS on Elementor Free?

[jomotioncreative]

Is there a way to add text or associated title of each slider to side nav dots (without using hard-coded pseudo-element text)? Thanks!

[mohammadumair]

There's an issue when i'm changing the width of dots it is changing horizontally when it's moved to the left side height doesn't work there plzz help me with that issue.

[x.rubiks]

how to make rounded edges for slider in elementor ??

[maaziabderrahmane]

what about vertical slide for pictures