Home → RoyalSlider HTML version issues →

Issue with slider responsiveness and captions too

• Edit

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. :)

• IMG_06988E1FFB06-1.jpeg 556 KB

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

   

   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/

   • Edit

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

   

   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.

   • Edit

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

   

   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.

   • Edit

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

   

   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.

   • Edit

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

   

   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

   • Edit

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

   

   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>
   

   • Edit

7. 7 Posted by catherinemeier on 07 Apr, 2022 11:58 PM

   

   Thanks so much!

   • Edit