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

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

Want to improve this question? As written, this question is lacking some of the information it needs to be answered. If the author adds details in comments, consider editing them into the question. Once there's sufficient detail to answer, vote to reopen the question.

Closed 4 months ago.

Improve this question

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.

What are $sliders?

shingo
– shingo

2025-07-12 12:22:24 +00:00
Commented Jul 12 at 12:22 — shingo
– shingo, Commented Jul 12 at 12:22

Julien Rajerison · Accepted Answer · 2025-07-12 13:41:57Z

i++ is not valid Blade syntax — you need to use $i++ instead. Based on your $sliders payload, the 'image' key is just an example; you'll need to adapt it according to the actual structure of your data.

<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('{{ asset('images/' . $sliders[$i]['image']) }}')">
            <div class="slider-content">
                <div class="row align-items-center h-100">
                    <div class="col-md-12 text-center">
                        <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>
                    </div>
                </div>
            </div>
        </div>                
    @endfor
</div>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related