Bootstrap Carousel with Responsive Images - html

Question

I'm having trouble with containing responsive images inside a carousel slide and currently the carousel is not able to slide to either the next or previous one. Any help is appreciated, thanks.
<h2 class="caption-2"> UI Snippets</h2>
<h2 class="description-2"> .</h2>
<div id="ui-carousel" class="carousel slide" data-ride="false">
<div class="carousel-inner" role="listbox" style="max-width:100%; max-height:630px !important;">
<div class="carousel-item active container-fluid">
<img class="design-1" src="UI-Designs/Day&Night.png" alt="Mock-Up">
</div>
<div class="carousel-item container-fluid">
<div class="row">
<div class="col-lg-4 col-md-6">
<img class="design-2" src="UI-Designs/Hiking.jpg" alt="Mock-Up">
</div>
<div class="col-lg-4 col-md-6">
<img class="design-2" src="UI-Designs/Homescreen.jpg" alt="Mock-Up">
</div>
<div class="col-lg-4 col-md-6">
<img class="design-2" src="UI-Designs/Cycling.jpg" alt="Mock-Up">
</div>
</div>
</div>
<div class="carousel-item container-fluid">
<video width=100% controls>
<source src="Echo.mp4" type="video/mp4">
</video>
</div>
</div>
<a class="carousel-control-prev" href="#ui-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#ui-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>```

Answer 1

<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="ny.jpg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>