Specify slidesSpacing in CSS

osh.evans's Avatar

osh.evans

15 Oct, 2012 08:45 PM

I can't find any docs/posts on this, so I'm presuming it's not possible to do.
I would like to be able to set the 'slidesSpacing' property via CSS (so that I can take advantage of media queries, and keep all layout values within our scss code rather than our js code).

Could you confirm whether this is possible or not?

Thanks!

  1. Support Staff 1 Posted by Dmitry Semenov on 16 Oct, 2012 06:40 AM

    Dmitry Semenov's Avatar

    Hi,

    You can't do this. But you can do this via JS:

    var si = $('.royalSlider').data('royalSlider');
    si.ev.on('rsBeforeSizeSet', function() {
        // do some check here, e.g. window width
        si.st.slidesSpacing = 50;
    });
    

    rsBeforeSizeSet event will fire only when size of slider changed, if you want to trigger it, you need to call updateSliderSize(true);.

    Dmtiry

  2. 2 Posted by anree on 15 Feb, 2013 11:53 AM

    anree's Avatar

    What about slidesSpacing in percents not pixels? Is it possible to set?

  3. Support Staff 3 Posted by Dmitry Semenov on 15 Feb, 2013 06:50 PM

    Dmitry Semenov's Avatar

    This option is not implemented via CSS as it requires many calculations. You can set this options only in pixels, but you can change it dynamically via CSS.

    Dmitry

  4. 4 Posted by tasti.l on 23 Jun, 2017 09:37 PM

    tasti.l's Avatar

    Hi Dmitry,

    Could you say more about your last comment on this thread: "you can set this option only in pixels, but you can change it dynamically via CSS"? I'd like to make the space between slides (slidesSpacing) responsive (i.e. increase at certain browser widths and decrease on a mobile device). Thanks for any additional information.

  5. Support Staff 5 Posted by Dmitry Semenov on 24 Jun, 2017 05:15 AM

    Dmitry Semenov's Avatar

    @tasti.l, Hi, it was a typo, I mean "dynamically via JS". You can do something like:

    var slider = $('.royalSlider').data('royalSlider');
    slider.ev.on('rsBeforeSizeSet', function() {
        slider.st.slidesSpacing = slider.width * 0.02;
    });
    

    and spacing with equal 2% of slider width.

  6. 6 Posted by tasti.l on 27 Jun, 2017 08:15 PM

    tasti.l's Avatar

    Thanks so much for your response, Dmitry. Is it possible to use a similar approach to set a greater slider.width for larger screens, and smaller for small screens, instead of one constant ratio of slider.width to slidesSpacing? Sorry if this is a naive question; I'm new to JS.

  7. Support Staff 7 Posted by Dmitry Semenov on 27 Jun, 2017 10:10 PM

    Dmitry Semenov's Avatar

    You may use properties like window.innerWidth to retrieve the current width of window.

  8. 8 Posted by tasti.l on 07 Aug, 2017 03:14 PM

    tasti.l's Avatar

    Hi again, Dmitry,

    Is there a way to make this work when the slider first loads in addition to when 'rsBeforeSizeSet' fires? For example, I want the slidesSpacing to be 20 percent for mobile and 35 percent for larger screens on initial load. I tried to make the function execute on window load, but I think the slider's default settings override it. Thanks for any advice...

  9. Support Staff 9 Posted by Dmitry Semenov on 07 Aug, 2017 03:55 PM

    Dmitry Semenov's Avatar

    @tasti.l, calculate the value of slidesSpacing option before slider is intiialized it and set it during the initialization.

  10. 10 Posted by tasti.l on 22 Aug, 2017 06:30 PM

    tasti.l's Avatar

    Hi Dmitry, sorry to be a pain, but I can't figure this out. Could you give an example of how to "calculate the value of slidesSpacing option before slider is intiialized it and set it during the initialization"? Thanks.

  11. Support Staff 11 Posted by Dmitry Semenov on 22 Aug, 2017 06:42 PM

    Dmitry Semenov's Avatar

    @tasti.l,

    var spacing = window.innerWidth * 0.05;
    $('.royalSlider').royalSlider({
       slidesSpacing: spacing,
       // other options...
    });
    
  12. 12 Posted by tasti.l on 22 Aug, 2017 07:08 PM

    tasti.l's Avatar

    works great! thank you.

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