How do i get this bootstrap carousel working - html

Question

Trying to add a bootstrap carousel to my site to display images, the first images show, however the buttons do not work to change the image
I've tried adding some javascript, however nothing seems to work.]
Overall I feel it is just a stupid mistake somewhere but I honestly am not sure, and do not know what else to do
<div class="row">
<div class="col-sm-4">
<div class="midcol">
<h2>Some of our current stock</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="#routes.Assets.versioned("images/1.jpeg")" alt="First slide">
<div class="container">
<div class="carousel-caption">
<p>Volkswagen Polo 2012</p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="#routes.Assets.versioned("images/2.jpeg")" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<p>Opel Corsa 2010</p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="#routes.Assets.versioned("images/3.jpeg")" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<p>Renautl Clio 2014</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div>
</div>

Answer 1

I think you should use item like this
<div class="carousel-item active">
<img class="d-block w-100" src="#routes.Assets.versioned("images/1.jpeg")" alt="First slide">
<div class="carousel-caption d-md-block">
<p>Volkswagen Polo 2012</p>
</div>
</div>
and also you should use jquery code
$('.carousel').carousel({
interval: 6000,
pause: "false"
});

Answer 2

when you are using bootstrap carousel you need to use carousel-item
instade of using item class
just use carousel- before your item hope it will solve your problem