bootstrap carousel control

Recently I was working on bootstrap carousel . I was looking for something like 

• I don't want cycle on the images as well as no back action on first page and no forward button on the last page
• And don't want  to navigate to the next until i clicked the icon to navigate, As you know bootstrap create a  vertical section for scrolling. 

I did the following to achieve my requirement  

<div id="carousel-example-generic"  class="carousel slide" data-ride="carousel" data-interval="false">  <!-- data-interval="false"-->                     

<!-- Wrapper for slides -->

<div class="carousel-inner" >

<div class="item active">

</div>

<div class="item">

</div>

    </div>

<!-- Controls -->

<!-- style="width:1%" did the trick and enforce user to click on the icon to navigate -->

<a style="width:1%;"  class="left carousel-control" href="#carousel-example-generic1" role="button" data-slide="prev">

<!-- put any custom image you want -->

<img  height="47" width="47" />

</a>   

<a style="width:1%;" class="right carousel-control" href="#carousel-example-generic1" role="button" data-slide="next">

   <!-- put any custom image you want -->

<img   height="47" width="47" />

</a>

</div>

<!-- run the below script on load of your page and it will do the hiding and showing the navigation icon on the first and last page --> 

<script>

var checkitem = function() {

        var $this;

        $this = $("#carousel-example-generic");

        if ($("#carousel-example-generic .carousel-inner .item:first").hasClass("active")) {

            $this.children(".left").hide();

            $this.children(".right").show();

        } else if ($("#carousel-example-generic .carousel-inner .item:last").hasClass("active")) {

            $this.children(".right").hide();

            $this.children(".left").show();

        } else {

            $this.children(".carousel-control").show();

        }

    };

</script>

Happy coding :)