bootstrap thumbnail slider

<div class="container">
    <div class="col-md-12">


        <div class="well">
            <div id="myCarousel" class="carousel slide">

                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="row">
                            <div class="col-sm-3"><a href="#x"><img src="image/satyam.png" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3"><a href="#x"><img src="image/ilios.png" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3"><a href="#x"><img src="image/alss.png" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3"><a href="#x"><img src="image/rrgroup.png" alt="Image" class="img-responsive"></a>
                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    <!--/item-->
                    <div class="item">
                        <div class="row">
                            <div class="col-sm-3"><a href="#x"><img src="image/alliancegroup.png" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3"><a href="#x"><img src="image/sslogo.png" alt="Image" class="img-responsive"></a>
                            </div>

                        </div>
                        <!--/row-->
                    </div>

                </div>
                <!--/carousel-inner-->
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>

                <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
            </div>
            <!--/myCarousel-->
        </div>
        <!--/well-->
    </div>
</div>




<style>
.carousel-control {
  padding-top:0%;
  width:5%;
height: 50px;
    font-size: 85px;


}
.img-responsive{
width:250px;
height:100px;
}
.carousel-control.left{
background:none !important;
left:-40px;
color:red;
}

.carousel-control.right{
background:none !important;
right:-40px;
color:red;
}

</style>
<script>
$(document).ready(function() {
    $('#myCarousel').carousel({
	interval: 50
	})

    $('#myCarousel').on('slid.bs.carousel', function() {
    	//alert("slid");
	});


});


</script>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"type="text/javascript"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>