Centering royal slider makes it "jump"

robertmarkbram's Avatar

robertmarkbram

11 Jul, 2017 07:35 AM

Hi Dmitry,

Changing my pages to get a responsive design means letting go of control over every image size individually..

Here is my sample page:
http://www.chihuahuarescuevictoria.org/chihuahuaStories/byName/Rock...

I am using "margin: 0 auto" to centre the entire slider, but it first renders the page without the adjusted margins and then the content jumps as the margins adjust to centre it. Any idea what I am doing wrong?

The CSS I am using to centre the slide show is:

/* -- Non-mobile screens. */
@media only screen and (min-width: 501px) {
   /* -- Slider itself. */
   #main .royalSlider {
      margin: 0 auto;
      padding: 0px;
   }
   /* -- Slider images. */
   #main .royalSlider img {
      padding: 0px;
      margin: 0px;
      border: none;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
   }
}

And the JavaScript:

jQuery(document).ready(function($) {
   $('#gallery').royalSlider({
      arrowsNav: true,
      arrowsNavAutoHide: false,
      controlNavigation: 'none',
      fadeinLoadedSlide: true,
      globalCaption: true,
      imageAlignCenter: true,
      imageScaleMode: "fit",
      keyboardNavEnabled: false,
      loop: true,
      loopRewind: false,
      numImagesToPreload: 4,
      slidesOrientation: 'horizontal',
      autoPlay: {
         // autoplay options go gere
         enabled: true,
         pauseOnHover: true,
         delay: 15000
      },
        deeplinking: {
            enabled: true,
            prefix: 'image-'
        },
      video: {
         // video options go gere
         autoHideBlocks: true,
         autoHideArrows: false
      }
   });
});

Thanks!

Rob
:)

  1. Support Staff 1 Posted by Dmitry Semenov on 11 Jul, 2017 04:16 PM

    Dmitry Semenov's Avatar

    Hello,

    You have an inline container with no width defined, so area of your post content equals to the widest element, and not to the width of window. Disable the Javascript on the page and reload it, you'll see that it's not centered there.

    Dmitry

  2. 2 Posted by robertmarkbram on 12 Jul, 2017 03:12 PM

    robertmarkbram's Avatar

    Ok, I will have a look at that, thank you.

    I know this isn't specific to Royal Slider, but in general does the width of the div (the slider's parent container) need to have a specific pixel width or can it be percentage or *? (Trying to get the responsive idea straight in my head.) Can Royal Slider (or any dynamic content of course) be responsive and centered and not 100%?

    Rob
    :)

  3. Support Staff 3 Posted by Dmitry Semenov on 12 Jul, 2017 04:12 PM

    Dmitry Semenov's Avatar

    Sure, it can be anything. Check examples of layouts from popular css frameworks, like http://foundation.zurb.com/templates.html

  4. robertmarkbram closed this discussion on 07 Nov, 2017 05:35 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