Responsive orientation - Portrait bullets / landscape tabs

joe's Avatar

joe

10 Dec, 2012 01:36 PM

Hi,

I've been trying to setup the royal slider so that it works with different parameters in different orientations.

Basically I'd like the tabbed version to appear on landscape views and just the slider with bullets under for portrait.

I initially setup two functions:

if(window.innerHeight > window.innerWidth){
            $('#portrait-slider').royalSlider({
                    //bullet params
                });
        }
        else{
            document.getElementById('portrait-slider').id = 'landscape-slider';
                $('#landscape-slider').royalSlider({
                    //tab params
                });
        }

this works to a degree, but clearly the slider is loaded into the DOM and needs to be reset upon orientation change. Is there a slider reload function I can add? I saw a destroy function, but no a re-enable one.

My alternative is just to hide the tabs using CSS...

  1. Support Staff 1 Posted by Dmytro Semenov on 10 Dec, 2012 10:52 PM

    Dmytro Semenov's Avatar

    Hi,

    Unfortunately, you can't enable both thumbnails and bullets at once and you can't change this option dynamically, without modifications of code.

    As an option you may code your own bullets or tabs with help of slider API and simply switch their visibility via CSS.

    Dmitry

  2. 2 Posted by joe on 11 Dec, 2012 09:36 AM

    joe's Avatar

    Thanks Dmitry, I'll check the API

  3. joe closed this discussion on 11 Dec, 2012 09:36 AM.

Comments are currently closed for this discussion. You can start a new one.

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