Image slideshow (carousel) Web template component

In the steps below, we create a web template component that displays a slideshow of images enabling Citizen developers to be able to configure the speed and indicator visibility of the slideshow in the power pages designer studio.

Create a web template.

1. In the Portal management (or power pages portal management if using enhanced data model) app , in the Content section, choose Web Templates and select New from the main menu to create a new web template.
   

2. Enter imageslider for the Name and save.

Setup the template with  manifest.   

1. In the Power Pages Design studio, Select Edit Code which opens VS code for the web

2. Under web-templates select imageslider.html
   web-template
   and copy/paste the following code

<div id="myCarousel" data-ride="carousel" class="carousel slide" data-interval={{interval}}>
 <!-- Indicators -->
 {% if {{indicator}} == 'Yes' %}
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li> 
 </ol>
 {% endif %}
 <!--slides -->
 <div class="carousel-inner">
 <div class="item active">
 <img src="/Geometric-4.png" alt="" name="Geometric-4.png"
 style="width: 117%; height: 305.545px; max-width: 100%;">
 </div>
 <div class="item">
 <img src="/Geometric-2.png" alt="" name="Geometric-4.png"
 style="width: 117%; height: 305.545px; max-width: 100%;">
 </div>
 <div class="item">
 <img src="/Graph-1.png" alt="" name="Geometric-4.png"
 style="width: 117%; height: 305.545px; max-width: 100%;">
 </div>
 </div>
 <!-- Left and right controls -->
 <a href="#myCarousel" data-slide="prev" class="left carousel-control">
 <span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span></a>
 <a href="#myCarousel" data-slide="next" class="right carousel-control">
 <span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span>
 </a>
</div>

{% manifest %} 
{
 "type": "Functional",
 "displayName": "Image Slider",
 "description": "Configure image slider",
 "params": [
 {
 "id": "interval",
 "displayName": "Interval",
 "description": "The amount of time to delay between automatically cycling an item."
 },
 {
 "id": "indicator",
 "displayName": "Do you want Indicators, Yes or No",
 "description": "If users needs to add indicators ."
 }
 ]
}
{% endmanifest %} ​

• Save
• Now select the webpage where you wish to include your component (imageslider) from the web pages folder

• Enter the following statement that references our imageslider template in the section you wish to display the slide show,

  {% include "imageslider" %}
  

• Save and return to design studio and select Sync. A preview of the component on your webpage will display.
• Select Edit custom component and you can configure the parameters (indicators and interval speed) that are defined in the manifest of the web template component  we created.
  
• You can then preview your website to see the effects
  Check out Microsoft Learn for more infos