Issue with slider responsiveness and captions too

catherinemeier's Avatar

catherinemeier

05 Apr, 2022 03:10 AM

I've been having issues with the responsiveness of the sliders as I am using throughout and new build this entire website. (I have RoyalSlider sliders in place for years.)

They break the page layout. I thought that I had resolved this by adding this css to the container that holds the slideshows;

.content {
overflow-x: hidden;
}

But it is still occasionally appearing if you change the orientation on a device. See attached.

Here are the settings I have on the page:
<script>
jQuery(document).ready(function($) {
$(".royalSlider").royalSlider({
// options go here
numImagesToPreload:2,
autoScaleSlider: true,
autoScaleSliderWidth: 2,
autoScaleSliderHeight: 1,
imageScaleMode: 'fit',
// as an example, enable keyboard arrows nav
keyboardNavEnabled: true
});
});
</script>

The second issue I am having is that when displaying for a responsive layout, I can no longer see the captions because of the autoScaleSliderHeight setting.

Please help! Please advise. :)

  1. Support Staff 1 Posted by Dmytro Semenov on 05 Apr, 2022 11:45 AM

    Dmytro Semenov's Avatar

    Hi,

    Can you please link to the page with the issue?

    If you set the width of the slider to 100%, it'll simply inherit the size of the parent container, http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-to-...

    The second issue I am having is that when displaying for a responsive layout, I can no longer see the captions because of the autoScaleSliderHeight setting.

    If you're using default Global Caption, you may move it outside of the sliding area, for example via $( '.some-other-container-class' ).append( $( '.rsGCaption' ) );.

    Otherwise, if you just place text inside the slider, you may use auto-height, like here https://dimsemenov.com/plugins/royal-slider/content-slider/

  2. 2 Posted by catherinemeier on 06 Apr, 2022 12:35 AM

    catherinemeier's Avatar

    Here is a link to a page with a simple image slider;
    https://barbaraneri.com/azure/c_projects/williams_wing/unlockingdesire.html

    I hid this in the CSS so that you can see what it does without it - pull
    the page in and out, the slideshow will break the layout;
    .content {
    overflow-x: hidden;
    }

    I have this in the CSS for the slider:
    .royalSlider {
    width: 100%;
    height: auto;
    position: relative;
    direction: ltr;
    }

    Here is a page with captions:
    https://barbaraneri.com/azure/c_projects/the_ebb_project/visual_art/ebb_selected.html

    Here is a page with thumbs and captions that isn't working;
    https://barbaraneri.com/azure/c_projects/the_ebb_project/visual_art/ebb_mirror.html

    Thanks for getting back to me quickly. I am upgrading the old html/css
    site to a new CSS grid version and there were MANY RoyalSlider sliders
    throughout. I'm having a lot of tiny headaches with this and have been
    through the documentation pretty thoroughly.

  3. 3 Posted by catherinemeier on 06 Apr, 2022 12:37 AM

    catherinemeier's Avatar

    Here is a link to a page with a simple image slider;
    https://barbaraneri.com/azure/c_projects/williams_wing/unlockingdesire.html

    I hid this in the CSS so that you can see what it does without it - pull the page in and out, the slideshow will break the layout;
    .content {
    overflow-x: hidden;
    }

    I have this in the CSS for the slider:
    .royalSlider {
    width: 100%;
    height: auto;
    position: relative;
    direction: ltr;
    }

    Here is a page with captions:
    https://barbaraneri.com/azure/c_projects/the_ebb_project/visual_art/ebb_selected.html

    Here is a page with thumbs and captions that isn't working;
    https://barbaraneri.com/azure/c_projects/the_ebb_project/visual_art/ebb_mirror.html

    Thanks for getting back to me quickly. I am upgrading the old html/css site to a new CSS grid version and there were MANY RoyalSlider sliders throughout. I'm having a lot of tiny headaches with this and have been through the documentation pretty thoroughly.

  4. Support Staff 4 Posted by Dmytro Semenov on 06 Apr, 2022 05:42 AM

    Dmytro Semenov's Avatar

    The grid layout is causing the overflow, there is similar issue with your page title, it's not just the gallery. You might wanna check this https://stackoverflow.com/questions/43311943/prevent-content-from-e...

    Regarding the caption, you might want to use the Global Caption module, https://dimsemenov.com/plugins/royal-slider/documentation/#global-c... - add globalCaption:true option and rsCaption to the paragraphs of content.

  5. 5 Posted by catherinemeier on 07 Apr, 2022 03:28 AM

    catherinemeier's Avatar

    Hello,

    Thank you for pointing me to that resource for the expanding grid items! I
    think that is resolved.

    So can you please, then, explain to me how the script settings (which I
    think aren't right) should be when I have the css set to this:

    .royalSlider {
    width: 100%;
    height: auto;
    position: relative;
    direction: ltr;
    }

    .royalSlider img {
        width: 100%;
        height: auto;
        margin: 10px auto;
    }

     <script>
    jQuery(document).ready(function($) {
    $(".royalSlider").royalSlider({
    // options go here
    numImagesToPreload:2,
    autoScaleSlider: true,
    autoScaleSliderWidth: 2,
    autoScaleSliderHeight: 1,
    imageScaleMode: 'fit',
    globalCaption:true,
    // as an example, enable keyboard arrows nav
    keyboardNavEnabled: true
    });
    });
    </script>

    I did what you suggested for the captions but it isn't working right for
    this situation:
    https://barbaraneri.com/azure/c_projects/the_ebb_project/visual_art/ebb_selected.html

  6. Support Staff 6 Posted by Dmytro Semenov on 07 Apr, 2022 10:56 AM

    Dmytro Semenov's Avatar

    Your settings are correct, if you wanna caption below - move it after slider is initialized, like so:

     <script>
    jQuery(document).ready(function($) {
      $(".royalSlider").royalSlider({
        // options go here
        numImagesToPreload:2,
        autoScaleSlider: true,
        autoScaleSliderWidth: 2,
        autoScaleSliderHeight: 1,
        imageScaleMode: 'fit',
        globalCaption:true,
        // as an example, enable keyboard arrows nav
        keyboardNavEnabled: true
      });
      $('.royalSlider').after( $('.rsGCaption') );
    });
    </script>
    
  7. 7 Posted by catherinemeier on 07 Apr, 2022 11:58 PM

    catherinemeier's Avatar

    Thanks so much!

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • IMG_06988E1FFB06-1.jpeg 556 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