Example
<abp-carousel style="width: 500px; height:250px" indicators="false" controls="false">
<abp-carousel-item src="https://via.placeholder.com/500x250.png?text=First+Slide"></abp-carousel-item>
<abp-carousel-item src="https://via.placeholder.com/500x250.png?text=Second+Slide"></abp-carousel-item>
<abp-carousel-item src="https://via.placeholder.com/500x250.png?text=Third+Slide"></abp-carousel-item>
</abp-carousel>
<div style="width: 500px; height:250px" data-bs-ride="carousel" id="Cf719505579644788b3e0f2722b8170d2" class="carousel slide"><div class="carousel-inner"><div class="carousel-item active"><img alt="" class="d-block w-100" src="https://via.placeholder.com/500x250.png?text=First+Slide"></img></div><div class="carousel-item "><img alt="" class="d-block w-100" src="https://via.placeholder.com/500x250.png?text=Second+Slide"></img></div><div class="carousel-item "><img alt="" class="d-block w-100" src="https://via.placeholder.com/500x250.png?text=Third+Slide"></img></div></div></div>
With indicators
<abp-carousel style="width: 500px; height:250px" indicators="true" controls="false">
<abp-carousel-item src="https://via.placeholder.com/500x250.png?text=First+Slide"></abp-carousel-item>
<abp-carousel-item src="https://via.placeholder.com/500x250.png?text=Second+Slide"></abp-carousel-item>
<abp-carousel-item src="https://via.placeholder.com/500x250.png?text=Third+Slide"></abp-carousel-item>
</abp-carousel>
<div style="width: 500px; height:250px" data-bs-ride="carousel" id="C62958b45389e49adb1fc89db2771da07" class="carousel slide"><ol class="carousel-indicators"><li class="active" data-bs-slide-to="0" data-bs-target="#C62958b45389e49adb1fc89db2771da07"></li><li data-bs-slide-to="1" data-bs-target="#C62958b45389e49adb1fc89db2771da07"></li><li data-bs-slide-to="2" data-bs-target="#C62958b45389e49adb1fc89db2771da07"></li></ol><div class="carousel-inner"><div class="carousel-item active"><img alt="" class="d-block w-100" src="https://via.placeholder.com/500x250.png?text=First+Slide"></img></div><div class="carousel-item "><img alt="" class="d-block w-100" src="https://via.placeholder.com/500x250.png?text=Second+Slide"></img></div><div class="carousel-item "><img alt="" class="d-block w-100" src="https://via.placeholder.com/500x250.png?text=Third+Slide"></img></div></div></div>
With controls
<abp-carousel style="width: 500px; height:250px" indicators="true" controls="true">
<abp-carousel-item src="https://via.placeholder.com/500x250.png?text=First+Slide"></abp-carousel-item>
<abp-carousel-item src="https://via.placeholder.com/500x250.png?text=Second+Slide"></abp-carousel-item>
<abp-carousel-item src="https://via.placeholder.com/500x250.png?text=Third+Slide"></abp-carousel-item>
</abp-carousel>
<div style="width: 500px; height:250px" data-bs-ride="carousel" id="C54657784485548a9b1f6d2f57e4b64cb" class="carousel slide"><ol class="carousel-indicators"><li class="active" data-bs-slide-to="0" data-bs-target="#C54657784485548a9b1f6d2f57e4b64cb"></li><li data-bs-slide-to="1" data-bs-target="#C54657784485548a9b1f6d2f57e4b64cb"></li><li data-bs-slide-to="2" data-bs-target="#C54657784485548a9b1f6d2f57e4b64cb"></li></ol><div class="carousel-inner"><div class="carousel-item active"><img alt="" class="d-block w-100" src="https://via.placeholder.com/500x250.png?text=First+Slide"></img></div><div class="carousel-item "><img alt="" class="d-block w-100" src="https://via.placeholder.com/500x250.png?text=Second+Slide"></img></div><div class="carousel-item "><img alt="" class="d-block w-100" src="https://via.placeholder.com/500x250.png?text=Third+Slide"></img></div></div><a class="carousel-control-prev" data-bs-slide="prev" href="#C54657784485548a9b1f6d2f57e4b64cb" role="button"><span aria-hidden="true" class="carousel-control-prev-icon"></span><span class="visually-hidden">Previous</span></a><a class="carousel-control-next" data-bs-slide="next" href="#C54657784485548a9b1f6d2f57e4b64cb" role="button"><span aria-hidden="true" class="carousel-control-next-icon"></span><span class="visually-hidden">Next</span></a></div>