using for loop to render image in background image [closed]

I am trying to render an image in my carousel from the database, using a for loop.

But I am stuck on how to use a for loop here, and how to render an image in style="background-image:url.

My code:

<div class="banner-carousel banner-carousel-1 mb-0">
    @for ($i = 0; $i < count($sliders); i++)
        <div class="banner-carousel-item" style="background-image:url(images/{{$sliders[i]['']]}})">
            <div class="slider-content">

                <div class="row align-items-center h-100">
                    <div class="col-md-12 text-center">
                        <p data-animation-in="slideInLeft" data-duration-in="1.2">
                        <h2 class="slide-title" data-animation-in="slideInDown">Meet Our Engineers</h2>
                        <h2 class="slide-title" data-animation-in="slideInLeft">17 Years of excellence in</h2>
                        <h3 class="slide-sub-title" data-animation-in="slideInRight">Construction Industry
                        </h3>
                        </p>
                    </div>
                </div>

            </div>
        </div>
    @endfor
</div>

My image is in public/images folder in the app.