Visible nearby for HTML content

kathy21's Avatar

kathy21

12 Jan, 2018 12:57 PM

Hello Dmitry,

I have setup visible nearby slider with the following settings:

$('#gallery-1').royalSlider({
        addActiveClass: true,
        arrowsNav: true,
        controlNavigation: 'none',
        loop: true,
        fadeinLoadedSlide: false,
        globalCaption: true,
        keyboardNavEnabled: true,
        globalCaptionInside: false,

        visibleNearby: {
          enabled: true,
          centerArea: 0.3,
          center: true,
          breakpoint: 650,
          breakpointCenterArea: 0.64,
          navigateByCenterClick: true
        }
      }).data('royalSlider');

It looks good on desktop: https://screencast.com/t/QcLMujJ69lEe, but on mobile screen size slides get crammed like this: https://screencast.com/t/Rz9vHBFg. Is there any way to show just 1 slide on mobile devices? Each slide is set to max-width: 378px;

Thank you for your help, Dmitry!

Sincerely,
Kate

  1. Support Staff 1 Posted by Dmitry Semenov on 12 Jan, 2018 03:10 PM

    Dmitry Semenov's Avatar

    Hello,

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

  2. 2 Posted by kathy21 on 12 Jan, 2018 03:13 PM

    kathy21's Avatar

    Thank you for your quick reply, Dmitry. I'll try that.

    Sincerely,
    Kate

  3. 3 Posted by kathy21 on 12 Jan, 2018 07:23 PM

    kathy21's Avatar

    Hello Dmitry,

    I have tried the solution you suggested and it worked for turning off the visible nearby. Is there a public method I could use to switch the visible nearby option on/off depending on screen size, as well as centerArea property value?

    Destroying the slider with .destroy() method and re-initializing it on window.resize doesn't work for some reason, slider stays with same properties as before.

    Sincerely,
    Kate

  4. 4 Posted by kathy21 on 13 Jan, 2018 08:49 AM

    kathy21's Avatar

    I managed to make this working by setting different breakpointCenterArea value, like so:

    $('#gallery-1').royalSlider({
                addActiveClass: true,
                arrowsNav: true,
                controlNavigation: 'none',
                loop: true,
                fadeinLoadedSlide: false,
                keyboardNavEnabled: true,
    
                visibleNearby: {
                  enabled: true,
                  centerArea: 0.3,
                  center: true,
                  breakpoint: 1021,
                  breakpointCenterArea: 1,
                  navigateByCenterClick: true
                }
              }).data('royalSlider');
    

    Slides have .rsContent class and have { display: inline-block; } style in CSS.

    This way, on mobile screen size there's only 1 slide displayed, on desktop there are 3 slides centered with 4-5th slides visible on sides of the screen.

    Hope this helps someone else as well.

    Thank you for your help, Dmitry!

    Sincerely,
    Kate

  5. kathy21 closed this discussion on 13 Jan, 2018 08:53 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