Support scrset in <sl-carousel>

[xaxam]

What issue are you having?

I would love to use srcset in carousel and image comparer to load images depending on the current viewport.

[CetinSert]

Just one thing to keep in mind. The image comparer currently works for any element!
See https://webpdf.pro/#hifi_rendering using <sl-image-comparer> with two <pdf-page>s:

<sl-image-comparer>
  <pdf-page slot=before of=c no=14 canvas=.js rotation=90 scale=2 onclick=this.svg--></pdf-page>
  <pdf-page slot=after  of=c no=14 canvas=ium rotation=90 scale=2 onclick=this.update()></pdf-page>
</sl-image-comparer>

We should not lose this genericity!

[CetinSert]

I believe anyone can just use:

<sl-image-comparer>
  <img slot=before srcset=⋯>
  <img slot=after  srcset=⋯>
</sl-image-comparer>

[xaxam]

Does that work for you? I seemed to break things when I tried.

[claviska]

@xaxam A quick test using <img srcset="…"> seems to work in <sl-image-comparer>. Are you able to post a repro where it doesn't work the way you expect? Thanks!

[claviska]

It would also help to have an <sl-carousel> example.

[claviska]

It looks like srcset works fine in <sl-image-comparer> but not as well in <sl-carousel>.

This might have something to do with how the carousel clones nodes. I would suggest trying <picture> or even using <sl-resize-observer> to swap out the slides if you really need this right away.

@alenaksu given how it's architected, do you think this is a reasonable ask for the carousel, or would you consider it too difficult/out of scope?

[alenaksu]

Sorry but I'm not sure I got the problem. I tried to create a carousel with an image comparer in one of the slide and responsive images seemed to work properly. I guess I may have missed something.
Do you have any code to share that I could try with?

[claviska]

@alenaksu if I understand correctly, OP was suggesting that srcset wasn't working in both components, not when they're combined.

It does seem like <sl-image-comparer> works fine, so I'm updating the title to make things more clear.