Image slideshows are an excellent way to showcase products, services, or company culture. They can also be used to tell a story or provide information in a visually appealing way.
This guide will show you how to easily add an image slideshow to your power pages website embedding the following code.
<div id="myCarousel" data-ride="carousel" class="carousel slide">
<!-- Indicators -->
<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>
<!--slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://archello.s3.eu-central-1.amazonaws.com/images/2018/11/23/049-Khaoyai-House.1542959549.3816.jpg"
alt="House 1" style="max-width: 100%;" />
</div>
<div class="item">
<img src="https://archello.s3.eu-central-1.amazonaws.com/images/2019/03/08/2EXT-Front1.1552013766.6593.jpg"
alt="House 2" style="max-width: 100%;" />
</div>
<div class="item">
<img src="https://cdn.carrot.com/uploads/sites/66274/2022/07/sell-my-house-fast-in-oak-park-mi-1800x800.jpg"
alt="House 3" style="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>
