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

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)
  • The forum ‘ Feature Suggestions’ is closed to new topics and replies.