Bootstrap 4 Carousal

Carousel element

carousel-slide

carousel-inner

carousel-item

aaaaa

  

HTML code for Bootstrap 4 carousal

<div class="#carousal-container">
 

   <div id="#mycarousal-1" class="carousel slide" data-ride="carousel"data-interval="3000">

    
    <ul class="carousel-indicators">
    <li data-target="#mycarousal-1" data-slide-to="0" class="active"></li>
    <li data-target="#mycarousal-1" data-slide-to="1"></li>
    <li data-target="#mycarousal-1" data-slide-to="2"></li>
    </ul>


<div class="carousel-inner">


    <div class="carousel-item active">
    <img src="First Image link goes here" alt="Los Angeles" width="1100" height="500" />
    
    <div class="carousel-caption">
    <h3> First Image Header </h3>
    <p> First Image caption </p>

    </div> 
    </div>
  

    <div class="carousel-item">
    <img src=" Second Image Link goes here" alt="Chicago" width="1100" height="500" />
    
    <div class="carousel-caption">
    <h3> Secnond Image Header </h3>
    <p> Second Image Caption </p>
 
    </div>    
    </div>


    <div class="carousel-item">
    <img src=" Third Image Link goes here" alt="Chicago" width="1100" height="500" />
    
    <div class="carousel-caption">
    <h3> Third Image Header </h3>
    <p>  Third Image Caption </p>
 
    </div>  
    </div>


</div>


     <a class="carousel-control-prev" href="#mycarousal-1" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
     </a>

     <a class="carousel-control-next" href="#mycarousal-1" data-slide="next">
        <span class="carousel-control-next-icon"></span>
     </a>


</div>
      
</div>

CSS code to desgin carousal :

.carousal-container { width:100%;background:#000000; padding:20px;}

.carousal-container .carousel-inner img{
 
  width:100%;
  height:250px;
  object-fit:cover;
}