carousel pause
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
....
<div class="carousel-caption d-none d-md-block">
<h2>...</h2>
<p class="d-none d-sm-block">Lorem imsum...
</p>
</div>
</div>
<div class="carousel-item">
<img class="d-flex img-fluid" alt="..." src="...">
<div class="carousel-caption d-none d-md-block">
<h2 class="mt-0">...</h2>
<p class="d-none d-sm-block">
Lorem impsum ...
</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="...">
<div class="carousel-caption d-none d-md-block">
<h2 class="mt-0">...</h2>
<p class="d-none d-sm-block">
.......................................
</p>
</div>
</div>
</div>
</div>
<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>
<a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<div class="btn-group" id="carouselButton">
<button class="btn btn-danger btn-sm" id="carousel-pause">
<span class="fa fa-pause"></span>
</button>
<button class="btn btn-danger btn-sm" id="carousel-play">
<span class="fa fa-play"></span>
</button>
</div>
</div>
<script>
$(document).ready(function(){
$("#mycarousel").carousel( { interval: 2000 } );
$("#carousel-pause").click(function(){
$("#mycarousel").carousel('pause');
});
$("#carousel-play").click(function(){
$("#mycarousel").carousel('cycle');
});
});
</script>