Home Forums Feature Suggestions Allow Show Slider Thumbnails to position on side of gallery

This topic contains 6 replies, has 2 voices, and was last updated by  Maureen 4 years, 4 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #18057

    Maureen
    Participant

    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.

    #23516

    scrambler
    Moderator

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

    #23517

    Maureen
    Participant

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

    #23518

    scrambler
    Moderator

    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;}

    #23519

    Maureen
    Participant

    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. 

    #23520

    scrambler
    Moderator

    Glad you like it 🙂

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

    #23521

    Maureen
    Participant

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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.