how to change the size of slide in nearby mode?

matthias's Avatar

matthias

17 Jun, 2018 11:42 AM

hi there,

I set up royalslider to use it in nearby mode – and everything works fine exept that I cannot get the slide size to align with the text column (please see attached screen). I searched for a solution and saw you other post here where you describe how to modify the nearby-mode but I just want to be the slider a little bit higher so that the single slide width fits optically with the text.

is there a simple way to do this?
these are my settings:

jQuery(document).ready(function($) {
    var si = $('.gallery').royalSlider({
        arrowsNav: true,
        arrowsNavAutoHide: true,
        arrowsNavHideOnTouch: true,
        autoScaleSlider: true,
        controlNavigation: 'none',
        loop: true,
        fadeinLoadedSlide: false,
        globalCaption: true,
        keyboardNavEnabled: true,
        globalCaptionInside: false,
        imageAlignCenter: false,
        imageScaleMode: 'fit',
        imageScalePadding: 0,
        slidesSpacing: 40,
        transitionSpeed: 300,
        easeInOut: 'easeInOutSine',
        visibleNearby: {
            enabled: true,
            centerArea: 0.75,
            center: false,
            navigateByCenterClick: false
        }
    }).data('royalSlider');
            
    $('.slide4link').click(function(e) {
        si.goTo(4);
        return false;
    });
});

thank you very much
and kindest regards,
matthias

  1. Support Staff 1 Posted by Dmitry Semenov on 17 Jun, 2018 12:50 PM

    Dmitry Semenov's Avatar

    Hi,

    To implement such layout you may use this technique - http://help.dimsemenov.com/discussions/problems/4068-visiblenearby-...

  2. 2 Posted by matthias on 19 Jun, 2018 08:50 PM

    matthias's Avatar

    hi dmitry,

    thanks for the feedback.
    I already found that link and tried that but I loose the nearby slide if I do so.

    my css-file:
     
    .ausstellung .content .rswrap {
    grid-column: span 10;
    overflow: hidden;
    }

    royalslider.css:

    .royalSlider {
    position: relative;
    direction: ltr;
    width: 950px;
    }
    .rsOverflow {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: visible !important;
    float: left;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    }

    [code]
    jQuery(document).ready(function($) {
    var si = $('.gallery').royalSlider({
    arrowsNav: true,
    arrowsNavAutoHide: true,
    arrowsNavHideOnTouch: true,
    autoScaleSlider: true,
    controlNavigation: 'none',
    loop: true,
    fadeinLoadedSlide: false,
    globalCaption: true,
    keyboardNavEnabled: true,
    globalCaptionInside: false,
    imageAlignCenter: false,
    imageScaleMode: 'fit',
    imageScalePadding: 0,
    slidesSpacing: 40,
    transitionSpeed: 300,
    easeInOut: 'easeInOutSine',
    visibleNearby: {
    enabled: false,
    centerArea: 0.75,
    center: false,
    navigateByCenterClick: false
    }
    }).data('royalSlider');

    $('.slide4link').click(function(e) {
    si.goTo(4);
    return false;
    });
    });
    [/code]

    thank you
    and kind regards,
    matthias

    Matthias Ballmann
    Erlenkamp 5
    22087 Hamburg

    040 27808418
    0173 2463378

  3. Support Staff 3 Posted by Dmitry Semenov on 20 Jun, 2018 04:46 AM

    Dmitry Semenov's Avatar

    Make sure that your content wrapper doesn't crop it with overflow:hidden.

    If you won't be able to resolve - please link to the page that you're working on.

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • Bildschirmfoto_2018-06-17_um_13.31.46.png 1.38 MB

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