Options in default example visibleNearby slider?

Jeremy's Avatar

Jeremy

22 Mar, 2021 05:58 AM

I am trying to replicate the example visibleNearby as a starting point. Would you be able to tell me which options/css I would need to replicate this?

https://dimsemenov.com/plugins/royal-slider/visible-nearby/

  1. Support Staff 1 Posted by Dmitry Semenov on 22 Mar, 2021 06:56 PM

    Dmitry Semenov's Avatar

    Hello,

    You may find the exact code within the archive that you downloaded from CodeCanyon. Anyway, JS:

    $('#gallery-1').royalSlider({
        addActiveClass: true,
        arrowsNav: false,
        controlNavigation: 'none',
        autoScaleSlider: true, 
        autoScaleSliderWidth: 960,     
        autoScaleSliderHeight: 340,
        loop: true,
        fadeinLoadedSlide: false,
        globalCaption: true,
        keyboardNavEnabled: true,
        globalCaptionInside: false,
        visibleNearby: {
          enabled: true,
          centerArea: 0.5,
          center: true,
          breakpoint: 650,
          breakpointCenterArea: 0.64,
          navigateByCenterClick: true
        }
      });
    

    CSS:

    .royalSlider .rsGCaption {
      font-size: 16px;
      line-height: 18px;
      padding: 12px 0 16px;
      background: #141414;
      width: 100%;
      position: static;
      float: left;
      left: auto;
      bottom: auto;
      text-align: center;
    }
    
    /* scaling and add opacity to nearby slides */
    .royalSlider .rsSlide img {
      opacity: 0.45;
      -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
    
      -webkit-transform: scale(0.9);  
      -moz-transform: scale(0.9); 
      -ms-transform: scale(0.9);
      -o-transform: scale(0.9);
      transform: scale(0.9);
    }
    .royalSlider .rsActiveSlide img {
      opacity: 1;
      -webkit-transform: scale(1);  
      -moz-transform: scale(1); 
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
    }
    

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