How to have full width slide but not on full screen?

peter.makowski's Avatar

peter.makowski

28 Nov, 2017 11:06 AM

Hello

Currently, i am using the ' imageScaleMode: "fill" ' option to have a full-width slide as shown in the image below but as a result, in full-screen mode, the image fills the entire screen which is too large. Also below is the effect I would like to achieve in full-screen.
How can I have a full-width slide without filling the screen in full-screen?

Here are my settings,

$(document).ready(function() {
            $(".royalSlider").royalSlider({
                keyboardNavEnabled: true,
                imageScalePadding: 0,
                imageScaleMode: "fill",
                controlNavigation: 'thumbnails',
                arrowsNavAutoHide: false,
                sliderDrag: false,
                sliderTouch: false,
                fullscreen: {
                    // fullscreen options go gere
                    enabled: true,
                    nativeFS: true
                }
            });
        });

  1. Support Staff 1 Posted by Dmitry Semenov on 28 Nov, 2017 03:28 PM

    Dmitry Semenov's Avatar

    Hello,

    Are you sure that you need "fill" scale mode in normal state? As by screenshot that you linked all your images have the same aspect ratio. Consider to just use:

    imageScaleMode: 'fit-if-smaller',
    imageScalePadding: 0
    

    and make slider aspect ratio match image aspect ratio -
    http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-to-...

  2. 2 Posted by peter.makowski on 28 Nov, 2017 05:19 PM

    peter.makowski's Avatar

    Hello Dmitry,

    Thank you for replying, I tried your suggestions however I still have the black bars on both sides, I attached an image below. I am trying to achieve a similar effect to the slider on the link, which also uses the fill mode but doesn't fill the screen in full-screen mode.

    (https://www.foxtons.co.uk/property-for-sale-in-mayfair/chpk3459343)

    Is this possible or does it need a workaround?

    Thanks

  3. Support Staff 3 Posted by Dmitry Semenov on 28 Nov, 2017 06:19 PM

    Dmitry Semenov's Avatar

    Increase the height of the slider (as described in the guide) so aspect ratio of viewport matches aspect ratio of the image and bars will go away.

    Or you may use API to modify scale mode, check discussions like http://help.dimsemenov.com/discussions/problems/4975-how-to-set-bac...

  4. 4 Posted by peter.makowski on 29 Nov, 2017 11:23 AM

    peter.makowski's Avatar

    It works now. Thanks, Dimitry, found the answers from the thread you linked

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • full-width.jpg 118 KB
  • full-screen.jpg 150 KB

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