Allow Show Slider Thumbnails to position on side of gallery

[Maureen]

Right now I can place the thumbnails above or below the slider. Would be nice to be able to place 2-3 columns on either side of the slider.

[scrambler]

In the mean time, we can may be do that with custom CSS if you give us a page with specifics

[Maureen]

On this page I have the thumbs below the slider. Would like to have 3 columns with slightly smaller thumbs along the side.

http://www.charmantinvitations.com/wedding-invitations/

[scrambler]

The rules below in Main Options > Fonts & Custom > Custom CSS rule box should do it (may need !important on some)

#atwkslider-wedding-invite-slideshow-1 .atwk-viewport {float:right;width:50%;}
#atwkslider-wedding-invite-slideshow-1 .atwk-control-nav {float:left;width:50%;}

You will need to manage the number/size of thumbnails with the slider options, but the biggest issue with that kind of layout is that if you have a lot of thumbnails, they end up being a lot higher than the slider itself.

You can eventually conrol that by limiting the height and putting a scroll bar changing the second rule to

#atwkslider-wedding-invite-slideshow-1 .atwk-control-nav {float:left;width:50%;max-height:300px;overflow:auto;}

Of course you probably dont want that on phones, in which case you would make the rules

.is-desktop #atwkslider-wedding-invite-slideshow-1 .atwk-viewport {float:right;width:50%;}
.is-desktop #atwkslider-wedding-invite-slideshow-1 .atwk-control-nav {float:left;width:50%;max-height:300px;overflow:auto;}

[Maureen]

SCRAMBLER, YOU ARE A GENIUS!!

The rule did not work when I placed it into the Main Opt/Font & Custom?Custom CSS rule box, but it DID work when I put it in the box on the bottom of the Slider tab. !important not needed and it lines up beautifully 

Per-Slider Custom CSSAdvanced option. Add per-slider custom CSS. See Help file for more information.

Now I will add show if mobile to hide this and show slider only on mobile.

Thank you once again for making me look good. 😀

I am leaving it live for awhile for you to see before I put it back under construction. 

[scrambler]

Glad you like it 🙂

In the theme Custom CSS rule box, it probably needed !important.

[Maureen]

I LOVE it and can’t stop looking at it! 

[Author]

Posts