Carousel 2x workaround – is this OK?


waiting for Carousel to support 2x images (prettyplease! :slight_smile: ), I’m adding this in the generated html:


<div class="carousel-item"><img class="d-inline-block w-100" src="img/open-book-2.jpg"/><div class="carousel-caption"></div></div>


<div class="carousel-item"><img class="d-inline-block w-100" src="img/open-book-2.jpg" srcset="img/open-book-2@2x.jpg 2x"/><div class="carousel-caption"></div></div>

I.e., I’m adding the srcset prop pointing to the 2x image with the 2x spec. Is just this OK?
Thank you!



Hi @undavide welcome back,

You can use img + srcset along with the size attribute:

Or since Blocs is already using lazySizes.js you could use its inherent abilities alternatively:

EDIT: I forgot our conversion from … a year ago (thread from 2 years ago).

@norm, yes support directly built into the carousel brics by default would be nicer though. :wink: