Remover loop infinito do Carousel (bootstrap js)

Olá pessoal, implementei o carousel do bootstrap em uma página e gostaria que ele parasse o loop infinito, escondendo as setas quando chegam ao início/final da galeria.

Todos itens ativos possuem um atributo chamado data-number com o seu contador. Minha lógica: pegar o total de fotos dessa galeria e comparar com o número da foto. Se a foto for número 7 e o número de itens da galeria for 7, quer dizer que é a última foto. Assim, só preciso aplicar css e esconder a seta. Mas infelizmente estou com dificuldade de implantar.

Vejam o código:

self.element.find('a.left').click(function(e){
	$(this).parents('.carousel').carousel('prev');
	return false;
});

self.element.find('a.right').click(function(e){
	$(this).parents('.carousel').carousel('next');

//aqui tento pegar o data-number, porém, ele só pega o próximo, nunca o mesmo
console.log(self.element.find('.carousel-inner .item.active').attr('data-number'));
//imprime o numero da proxima foto, nao da foto ativa =(
// self = this

	return false;
});

Código html

<!-- LEGENDA -->

<div style="display: none;" class="container-galery-legend js-legend">
	<div class="container-galery-legend-inner">
 <div class="container-galery-legend-text"><p class="text-center"></p></div>
 <div class="container-galery-legend-bg"></div>
	</div>
</div>

<!-- ZOOM -->
<div id="carousel-galery-zoom" class="carousel slide js-galery-zoom">
<!-- Wrapper for slides -->

 <div class="carousel-inner" role="listbox" style="background: #fafafa;">
 <div class="item active" data-number="0">
 <div class="img-zoom block" data-dim="[785,600]" style="width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center center; background-image: url("5501cb29cf723.jpg");">
 </div>
 </div>
 <div class="item " data-number="1">
 <div class="img-zoom block" data-dim="[800,552]" style="width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center center; background-image: url("5501cb27211b2.jpg");">
 </div>
 </div>
 <div class="item " data-number="2">
 <div class="img-zoom block" data-dim="[800,572]" style="width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center center; background-image: url("5501cb2554f30.jpg");">
 </div>
 </div>
 <div class="item " data-number="3">
 <div class="img-zoom block" data-dim="[696,600]" style="width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center center; background-image: url("h5501cb23f3342.jpg");">
 </div>
 </div>
 <div class="item " data-number="4">
 <div class="img-zoom block" data-dim="[704,600]" style="width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center center; background-image: url("5501cb227810c.jpg");">
 </div>
 </div>

<!-- Controls -->

<a class="left carousel-control control-thumb" href="#carousel-galery-thumb" role="button" data-slide="prev">
	<span class="fa fa-angle-left text-lg" aria-hidden="true"></span>
	<span class="sr-only">Previous</span>
</a>

<a class="right carousel-control control-thumb" href="#carousel-galery-thumb" role="button" data-slide="next">
	<span class="fa fa-angle-right text-lg" aria-hidden="true"></span>
	<span class="sr-only">Next</span>
</a>

Podem me ajudar?