Add Play/Pause button to bootstrap carousel

I have read almost all the threads regarding to the bootstrap carousel, but haven't found an answer to my question. I have added two control buttons (play/pause) to the carousel, but each button fires the function from the default/first slide. I would like to be able to pause the current slide and play from the current slide whenever the click event happens.

Here is my code:

<script src="/_catalogs/masterpage/UHN/js/bootstrap.min.js"></script>
<script>
    $(function () {
        $('.carousel').carousel({ interval:6000 });  

        $('#playButton').click(function () {
            $('#homeCarousel').carousel('cycle');
        });
        $('#pauseButton').click(function () {
            $('#homeCarousel').carousel('pause');
        });
    });

</script>

And the two controls:

<!--Carousel controls -->
<button id="playButton">Play</button>
<button id="pauseButton">Pause</button>