[Enhancement] Image carousel - full caption display / functionality

[drawcard]

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:

[ramiy]

@drawcard
The widget can be improved using a select field with 4 options: None, Title, Caption, Description.
This way the user can choose what text to show.

[drawcard]

@ramiy that's a good idea, I'm not exactly sure how I can implement that so it might be a job for one of the senior devs.

[KingYes]

Merged by this PR: #1229

Thanks! 👍

[soniapello]

@KingYes Will it be added to the next released 1.1.7 or before ?

[KingYes]

v1.2.0

[carasmo]

When I have the caption turned off on the image carousel, the caption tags still print and show any padding or margin applied to figcaption in the theme. I made a PR.

			$caption_type = $this->get_settings( 'caption_type' );

				if ( '' === $caption_type ) {

					$carosel_caption = '';
					
				} else {
				
					$carosel_caption = '<figcaption class="elementor-image-carousel-caption">' . $image_caption . '</figcaption>';
				
				}
				
			$slides[] = '<div class="slick-slide"><figure class="slick-slide-inner">' . $image_html . '' . $carosel_caption . '</figure></div>';