How to have thumbs vertically on large screen and horizontally on mobile

Michele's Avatar

Michele

14 Dec, 2021 05:45 PM

Hello,
Is it possible to have the thumbs vertically only on the large screen (over 992px) and horizontally on smaller (under 992px)?
Thanks.

  1. Support Staff 1 Posted by Dmytro Semenov on 14 Dec, 2021 09:13 PM

    Dmytro Semenov's Avatar

    Hello,

    You'll need to use JS APi to implement this, the plugin has method setThumbsOrientation.

    var slider = $(".royalSlider").data('royalSlider');
    slider.setThumbsOrientation('vertical');
    
  2. 2 Posted by Michele on 14 Dec, 2021 11:29 PM

    Michele's Avatar

    Please, could you give me more info on how I can change this code to allow vertical for more 992px and horizontal thumbs for less than 991px using the JS API? Thanks.
    ---------
    jQuery(document).ready(function() {
      $('#gallery-2').royalSlider({
        fullscreen: {
          enabled: false,
          nativeFS: false
        },
        controlNavigation: 'thumbnails',
        thumbs: {
          orientation: 'vertical',
          paddingBottom: 4,
          appendSpan: true
        },
        transitionType:'fade',
        autoScaleSlider: true,
        imageScaleMode: 'fit',
        autoScaleSliderHeight: 500,
        loop: true,
        arrowsNav: false,
        keyboardNavEnabled: true

      });
        var slider = $('#gallery-2');
        slider.prepend(slider.find('.rsNav'));
    });
    ---------

  3. Support Staff 3 Posted by Dmytro Semenov on 15 Dec, 2021 08:09 AM

    Dmytro Semenov's Avatar

    Here is a basic example:

    $('#gallery-2').royalSlider({
      fullscreen: {
        enabled: false,
        nativeFS: false
      },
      controlNavigation: 'thumbnails',
      thumbs: {
        orientation: $(window).width() <= 600 ? 'horizontal' : 'vertical',
        paddingBottom: 4,
        appendSpan: true
      },
      transitionType:'fade',
      autoScaleSlider: true,
      imageScaleMode: 'fit',
      autoScaleSliderHeight: 500,
      loop: true,
      arrowsNav: false,
      keyboardNavEnabled: true
    });
    var slider = $('#gallery-2').data('royalSlider');
    $(window).on("orientationchange",function(){
        if($(window).width() <= 600){
          slider.setThumbsOrientation('horisontal');
        } else {
          slider.setThumbsOrientation('vertical');
        }
    });
    

    but if you aren't experience in JS, I would not recommend such modifications.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac