@if($component->count())
<div class="container-fluid mt-3">
    <div class="row">
        <div class="col-md-12">
            
            <div class="bootstrap-carousel">
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-touch="true">
                    
                    <ol class="carousel-indicators">
                        @for($i=0; $i<$component->count(); $i++)
                           @if($i == 0)
                           <li data-target="#carouselExampleIndicators" data-slide-to="{{$i}}" class="active"></li>
                           @else
                           <li data-target="#carouselExampleIndicators" data-slide-to="{{$i}}"></li>
                           @endif
                        @endfor   
                
                    </ol>
                    
                    <div class="carousel-inner">
                        @for($i=0; $i<$component->count(); $i++)
                           @if($i == 0)
                            <div class="carousel-item active">
                                <img class="d-block w-100" src="{{ asset('drop/'.$component[$i]->slider) }}" alt="First slide">
                            </div>
                           @else
                            <div class="carousel-item">
                                <img class="d-block w-100" src="{{ asset('drop/'.$component[$i]->slider) }}" alt="Second slide">
                            </div>
                           @endif
                        @endfor   
                    </div>

                </div>
            </div>    
                                
        </div>
    </div>
</div>
@endif