Big space before caption + bullets not showing

pedro's Avatar

pedro

09 Sep, 2017 05:07 PM

Hi,

I really not finding a solution for this. What I'm trying to do is:

- To have a image slider with <figure><img><figcaption(optional)> as the img element, since I already use figure in my blog posts.
- To have everything perfctly aligned
- To have bullets

So I set a <span class="rsCaption"> for using Global Caption.

Everything is working fine, except that:
- I can't find a way to show the bullets
- The Global Caption has a big margin on top. I wish to have it really close to the image as I do in regular images (seen in the same page). But I couldn't find a way...

The CSS I use is a merge of the main css and the rsDefault

Example: https://www.pedal.com.br/2017_exibe_texto.asp?id=12296&bloq=nao

ps. I'm using Google Chrome

  1. Support Staff 1 Posted by Dmitry Semenov on 09 Sep, 2017 08:54 PM

    Dmitry Semenov's Avatar

    Hello,

    There is 404 error on the page that you linked, so I can only guess:

    I can't find a way to show the bullets

    Make sure that option controlNavigation:'bullets' is set. Make sure that skin CSS file is included, or style .rsNav & .rsNavItem elements by yourself.

    The Global Caption has a big margin on top. I wish to have it really close to the image as I do in regular images (seen in the same page). But I couldn't find a way...

    The global caption element is placed outside of the main sliding area and thus its position does not depend on the image. You'll need either to modify size of sliding area http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-to-... or place text directly inside content of a slide (e.g. like here - http://dimsemenov.com/plugins/royal-slider/content-slider/ ).

    Dmitry

  2. 2 Posted by pedro on 09 Sep, 2017 09:31 PM

    pedro's Avatar

    Sorry, file is back on server now...

    Hmmm I didn't know I could include .rsNav an .rsNavItem... I will try to check in other templates..

    Thanks

  3. 3 Posted by pedro on 09 Sep, 2017 09:34 PM

    pedro's Avatar

    Anyway, can you give me more directions now that the file is back online ?

    I actually didn't find .rsNav reference...

  4. Support Staff 4 Posted by Dmitry Semenov on 10 Sep, 2017 05:50 AM

    Dmitry Semenov's Avatar

    You're using custom build for RoyalSlider js file, which doesn't contain bullets navigation module, either included or use full version http://dimsemenov.com/plugins/royal-slider/royalslider/jquery.royal...

  5. 5 Posted by pedro on 10 Sep, 2017 01:43 PM

    pedro's Avatar

    Ohh I really thought I was always using a complete version! And I was about to teste a custom one for the first time!! :o

    Well, bullets problem solved. Thanks a lot!

    Can you help me taking out the margin in the image below ?
    I thought it was my css but I did some tests getting out figure and figcaption and leaving IMG only but the spaces continues there.. it's in rsSlide and/or ActiveClass...

  6. Support Staff 6 Posted by Dmitry Semenov on 10 Sep, 2017 02:02 PM

    Dmitry Semenov's Avatar

    Make sure that slider aspect ratio matches image aspect ratio, e.g. if your image size is 1150x646, change options to:

    autoScaleSliderWidth: 1150,     
    autoScaleSliderHeight: 646
    

    Also, remove padding/box-shadow from image in slider, as it might distort scaling. Apply shadow to the slider itself, if you need it.

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