Share
Report
2Hello everyone,
I contact the community because I have an issue when I want to add a images carousel on my webite create with Power Pages. Sorry if it not the right place.
I followed this tutorial https://learn.microsoft.com/en-us/power-pages/configure/web-templates-as-components-carousel
And other tutorial and the result is the same:
- All items are displayed
- No buttons are shown.
Someone can help me please ?
Code page HTML:
<div class="container">{% include 'DemoYTCarousel' title:"DemoCarousel" interval:"6500" count:"2" height:"200" %}</div>
Code web template:
{% fetchxml locationsQuery %}
<fetch mapping='logical'>
<entity name='cre10_demoytcarousel'>
<attribute name='cre10_name' />
<attribute name='cre10_description' />
<attribute name='cre10_carousel_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.cre10_carousel_url}}&Full=true'); height: {{height | default:500}}px">
<div class="carousel-caption" style="background:white">
<h3>{{ loc.cre10_name }}</h3>
<p>{{ loc.cre10_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": ["cre10_demoytcarousel"],
"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 %}
All responses (
Answers (
