Почему пропадает карусель bootstrap 4 после добавление тега a к img?

Question

[kyurem_bog]

Пытаюсь сделать кликабельными изображения в карусели, но при добавлении тега a , карусель пропадает.

<div id="multiCarousel" class="carousel slide w-100" data-ride="carousel">
            <div class="carousel-inner " role="listbox">
                <div class="carousel-item active">
                    <img class="d-block col-2" src="images/51.png">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-2" src="images/52.png">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-2" src="images/53.png">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-2" src="images/54.png">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-2" src="images/55.png">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-2 " src="images/56.png">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-2" src="images/57.png">
                </div>


            </div>
            
            <a class="carousel-control-prev" href="#multiCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Предыдущий</span>
            </a>
            <a class="carousel-control-next" href="#multiCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Cледующий</span>
            </a>
        </div>

<script>
	
	
	$('#multiCarousel').carousel({
      interval: 10000
  })
    $('.carousel .carousel-item').each(function(){
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));

        for (var i=0;i<5;i++) {
            next=next.next();
            if (!next.length) {
               next = $(this).siblings(':first');
           }

           next.children(':first-child').clone().appendTo($(this));
       }
   });
</script>