Bootstrap carousel. Hide 'previous' and 'next' buttons on first and last slide

index.html

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="8000">
	<!--====/ Slider Pagination /=====-->
	<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">
		<!--====/ Single Slider /=====-->
		<div class="item active"> <img src="img/slider_bg.jpg" style="width:100%" data-src="holder.js/900x500/auto/#7cbf00:#fff/text: " alt="First slide">
			<div class="container">
				<div class="carousel-caption">
					<h1>PROFESSIONAL DOG BREEDING IN GREAT BRITAIN</h1>
					<p>Mike Trout homered in his first at-bat at Angel Stadium this year and Yasiel Puig exited after a scary collision with Howie Kendrick on Thursday night, as the Angels beat the Dodgers.</p>
					<a href="#"><i class="fa fa-arrow-circle-o-right"></i> READ MORE</a>
				</div>
			</div>
		</div>
		<!--====/ Single Slider /=====-->
		<div class="item"> <img src="img/slider_bg.jpg" style="width:100%" data-src="" alt="Second slide">
			<div class="container">
				<div class="carousel-caption">
					<h1>PROFESSIONAL DOG BREEDING IN GREAT BRITAIN</h1>
					<p>Mike Trout homered in his first at-bat at Angel Stadium this year and Yasiel Puig exited after a scary collision with Howie Kendrick on Thursday night, as the Angels beat the Dodgers.</p>
					<a href="#"><i class="fa fa-arrow-circle-o-right"></i> READ MORE</a>
				</div>
			</div>
		</div>
		<!--====/ Single Slider /=====-->
		<div class="item"> <img src="img/slider_bg.jpg" style="width:100%" data-src="" alt="Third slide">
			<div class="container">
				<div class="carousel-caption">
					<h1>PROFESSIONAL DOG BREEDING IN GREAT BRITAIN</h1>
					<p>Mike Trout homered in his first at-bat at Angel Stadium this year and Yasiel Puig exited after a scary collision with Howie Kendrick on Thursday night, as the Angels beat the Dodgers.</p>
					<a href="#"><i class="fa fa-arrow-circle-o-right"></i> READ MORE</a>
				</div>
			</div>
		</div>
	</div>
	
	<!--====/ Slider Previous Next Arrow /=====-->
	<a class="left carousel-control" href="#myCarousel" data-slide="prev">
		<span><i class="fa fa-angle-left"></i></span>
	</a>
	<a class="right carousel-control" href="#myCarousel" data-slide="next">
		<span><i class="fa fa-angle-right"></i></span>
	</a>

</div>

<!-- Add this script at footer before </body> tag -->
<script>
  /* If you want to stop autoplay bootstrap carousel the use this code: 
  $('.carousel').carousel({
    interval: false,
  })
  */
    $(document).ready(function () { 
        checkitem();
    });

    $('#myCarousel').on('slid.bs.carousel', checkitem);

    function checkitem() {
        var $this = $('#myCarousel');
        if ($('.carousel-inner .item:first').hasClass('active')) {
            // Hide left arrow
            $this.children('.left.carousel-control').hide();
            // But show right arrow
            $this.children('.right.carousel-control').show();
        } else if ($('.carousel-inner .item:last').hasClass('active')) {
            // Hide right arrow
            $this.children('.right.carousel-control').hide();
            // But show left arrow
            $this.children('.left.carousel-control').show();
        } else {
            $this.children('.carousel-control').show();
        }
    }
</script>