Hey @tim.young, you can do this with a List Component, an HTML component, and a bit of JavaScript.
To start I added the following List component on a details page which displays connected records that have an Image field.
Here is the HTML I’ve added to the list component
<p class="imageUrl">{Image}</p>
I then added the following HTML to the source code of a regular HTML component.
<div class="carousel"> </div>
And finally, this is the JavaScript I’ve added to the page.
var flag = false;
function checkFlag() {
if(flag === false) {
if ($('.imageUrl').html() !== undefined) {
flag = true;
}
window.setTimeout(checkFlag, 100);
} else {
$('.imageUrl').each(function(){
var imageUrl = $(this).text();
var carouselItem = '<a class="carousel-item" href="#!"><img src="'+imageUrl+'"></a>';
$('.carousel').append(carouselItem);
});
$('.carousel').carousel();
}
}
checkFlag();