Srcset example with webp and jpg

info's Avatar

info

12 Nov, 2018 01:25 PM

Hi,
Is there a working demo of Royal Slider with srcset? Preferable with webp and jpg fallback? Any luck with implementing Lazy Sizes from Farkas?
Regards & Thanks,
David

  1. Support Staff 1 Posted by Dmitry Semenov on 12 Nov, 2018 02:09 PM

    Dmitry Semenov's Avatar

    Hello,

    You may add IMG or PICTURE element to the slider without rsImg class, it will work the same way as it's added to the page. Use CSS to position/center image, for example: https://codepen.io/dimsemenov/pen/jhsJL

    To make it work with scripts like lazysizes you may use slider API and events like rsAfterSlideChange, e.g.:

    var slider = $(".royalSlider").data('royalSlider');
    slider.ev.on('rsAfterSlideChange', function(event) {
        console.log( slider.currSlide.content[0] ); // contents of the current slide
    });
    

    But I'd recommend to just generate image/picture element dynamically, as shown at http://jsfiddle.net/DmitrySemenov/vsqtwr80/1/

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