I noticed that there was no ability to show captions for images inserted into the Image Carousel widget, so I have written this functionality. The code itself is based on the caption functionality found in the Image Gallery widget, so for all intents and purposes it functions exactly the same.

The caption is currently inserted as a <figcaption> element directly inside .slick-slide-inner. Full typographic control can be made on that element (eg color, font size, alignment etc). The content of the caption is sourced from the Media Library "Caption" attribute, just like in the Image Gallery widget.

Some basic testing has been done - the only limitation is that the slick.js slide height sets itself to the entirety of the caption + image space. So if there is a particularly lengthy caption in one image, it will create a void underneath the other less lengthy slides. However this also ensures the content beneath the slide doesn't bounce around as different slide heights are brought into view.

This limitation could be solved with better CSS styling (or relocating figcaption to a better place in the markup), but the current solution works for now.

Please suggest ideas / improvements!

TO-DO / WISHLIST

• Add an option to toggle absolute positioning on/off - so that it can be placed over an image, maybe with adjustable background colour / opacities to make it readable. This would also solve the slide height limitation.
• Implement @ramiy 's suggestion of alternate text entry options

SCREENSHOTS

Front end:

(Note the gap between the slide image, captions, and controls, caused by the limitation described above. Not a huge issue for most users I imagine, it's only if you happen to abuse the caption feature by adding loads of text...)

Works responsively too

Code structure:

Backend controls: