在轮播中的每个图像上添加图标

Question

我一直很难完成这项任务，但没有运气。我想在旋转木马的每个图像上添加图标。我用过这个轮播here。我循环所有图像，但图标不在正确的位置。任何人？谢谢！

 <div class="rotator" id="carousel-{{ trim($rotator) }}">
        {{-- */ $rotator_items=$rotators->where('rotator_id',$rotator)->all() /*  --}}

        @foreach ( $rotator_items as $items)
              {{-- items --}}
              <img id="{{ trim($items->id) }}" @if($items->item_name == 'default_item') onclick=" handleRotatorItem('{{ trim($items->id) }}'); "@else ondblclick="editRotatorItem({{ trim($items->item_id) }});" @endif alt="{{ trim($items->item_name) }}" class="img-rotator-item" src="{{ trim($items->img_src) }}" data-toggle="tooltip" title="{{ $items->notes }}">
                                    {{-- /assets/img/placeholder.png --}}
         </img>
         <i class="fa fa-info-circle fa-2x" aria-hidden="true"></i>
     @endforeach
</div>

脚本：

 $(element).ImageRotator( {
            buttonLeft   : $("#ctrlRotatorItems > .left "),
            buttonRight  : $("#ctrlRotatorItems > .right "),
            autoPlay     : 1,
            bringToFront : true,
            farScale     : 0.2,
            yOrigin      : 100,
            yRadius      : 100,
            xRadius      : $('#main-content').width() / 2,
            speed        : 2,
            autoPlayDelay: 10000,
            onLoaded     : function(carousel) {
                var item = carousel.nearestItem();
                console.log(item);
            },
            onRendered   : function(carousel) {
                var item = carousel.nearestItem();

                $('#itemName').html(item.element.alt);
            },
            onAnimationFinished : function(carousel) {
                console.log(carousel);
            }
        });