Bootstrap Carousel in Angular

Carousels are very stylish and users like them. In this tutorial, you will learn how to create a bootstrap carousel in angular.

Step 1: Install bootstrap in angular

You have to install bootstrap in your angular application to create a bootstrap carousel.
If you don’t know how to install bootstrap in angular, refer the following tutorial:
How to install bootstrap in angular

Step 2: Bootstrap Carousel Code

After installing bootstrap in your project, open app.component.html file and paste the following code.

<h1 class="text-center">Bootstrap carousel in angular</h1>
<div class="container mt-3">
  <div id="bootstrapCarousel" class="carousel slide" data-ride="carousel">
    <!-- Slide Indicators -->
    <ul class="carousel-indicators">
      <li data-target="#bootstrapCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#bootstrapCarousel" data-slide-to="1"></li>
      <li data-target="#bootstrapCarousel" data-slide-to="2"></li>
    </ul>

    <!-- The slides to show -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img
          src="https://images.unsplash.com/photo-1571366343168-631c5bcca7a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80"
          width="1100" height="500">
      </div>
      <div class="carousel-item">
        <img
          src="https://images.unsplash.com/photo-1571208756906-92fea1cc1087?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80"
          width="1100" height="500">
      </div>
      <div class="carousel-item">
        <img
          src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80"
          width="1100" height="500">
      </div>
    </div>

    <!--  Controls (Left and right) -->
    <a class="carousel-control-prev" href="#bootstrapCarousel" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#bootstrapCarousel" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>
</div>

Step 3: Run your project

Run your project and you will see output of bootstrap carousel like following:

Leave a Reply