I am also facing the same error where images are displaying and the text seems to be greyed out. I referred the same video that you have mentioned. Could you please let me know how were you able to resolve the issue.
{% fetchxml locationsQuery %}
<fetch mapping='logical'>
<entity name='cr109_demoprcarousel'>
<attribute name='cr109_name' />
<attribute name='cr109_description' />
<attribute name='cr109_carouseluimage_url' />
</entity>
</fetch>
{% endfetchxml %}
<h2>{{ title | default: "Locations" }}</h2>
{% assign interval = interval | integer %}
{% assign count = count | integer %}
{% assign height = height | integer %}
<span>Showing {{ count }} out of {{ locationsQuery.results.entities.size }}</span>
{% if locationsQuery.results.entities.size > 0 %}
<div id="carousel-example-generic"
class="carousel slide"
data-ride="carousel"
data-interval="{{interval}}">
<!-- Indicators -->
<ol class="carousel-indicators">
{% for location in locationsQuery.results.entities limit: count %}
<li
data-target="#carousel-example-generic"
data-slide-to="{{forloop.index0}}"
class="{% if forloop.first %}active{% endif %}"></li>
{% endfor %}
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
{% for loc in locationsQuery.results.entities limit: count %}
<div class="item {% if forloop.first %}active{% endif %}" style="background-image:url('{{loc.cr109_carouseluimage_url}}&Full=true'); height: {{height | default:500}}px">
<div class="carousel-caption" style="background:white">
<h3>{{ loc.cr109_name }}</h3>
<p>{{ loc.cr109_description }}</p>
</div>
</div>
{% endfor %}
</div>
<!-- Controls -->
<a
class="left carousel-control"
href="#carousel-example-generic"
role="button"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="right carousel-control"
href="#carousel-example-generic"
role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
{% endif %}
<style>
.carousel .item {
background-size: cover;
background-repeat: no-repeat;
}
</style>
{% manifest %}
{
"type": "Functional",
"displayName": "Locations Slider",
"description": "Locations slider using the table 'Place' as the data source",
"tables": ["cr109_demoprcarousel"],
"params": [
{
"id": "title",
"displayName": "Title",
"description": ""
},{
"id": "interval",
"displayName": "Interval",
"description": "The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. Default: 5000ms"
},{
"id": "count",
"displayName": "Count",
"description": "The number of locations to display"
},{
"id": "height",
"displayName": "Slide's height",
"description": "In px, default: 500px"
}
]
}
{% endmanifest %}
