Laravel add class using if statement

Question

I want to use Bootstrap carousel and the images should come from my database

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        @foreach($property->photos as $photo)
            <div class="carousel-item">
                <img class="d-block w-100" src="{{$photo->path}}" alt="First slide">
            </div>
        @endforeach 
    </div>
</div>

When I inspect the page I can see that the image is there, however I will not see anything of it because I need the class active in the div with class carousel-item.

Is there a way I can add the class active on the first box?

I tried using jQuery but it does not work:

$('.carousel-inner .carousel-item:first-child').addClass('active');

What version of Laravel are you using?

Rwd
– Rwd

2018-08-19 11:48:17 +00:00
Commented Aug 19, 2018 at 11:48 — Rwd
– Rwd, Commented Aug 19, 2018 at 11:48
Am using version 5.6

Sidney Sousa
– Sidney Sousa

2018-08-19 11:51:57 +00:00
Commented Aug 19, 2018 at 11:51 — Sidney Sousa
– Sidney Sousa, Commented Aug 19, 2018 at 11:51

Rwd · Accepted Answer · 2018-08-19 11:58:18Z

4

You can use The loop variable to accomplish this:

@foreach($property->photos as $photo)
    <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
        <img class="d-block w-100" src="{{$photo->path}}" alt="First slide">
    </div>
@endforeach

answered Aug 19, 2018 at 11:58

Rwd

35.3k7 gold badges71 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sidney Sousa Over a year ago

That helps too. Appreciate the support

morteza ataiy · Accepted Answer · 2018-08-19 11:46:36Z

2

Do you use

$(document).ready(function(){

like

$(document).ready(function(){
    $('.carousel-inner .carousel-item:first-child').addClass('active');
}

or not? because for run jq code you need wait for document to ready!

answered Aug 19, 2018 at 11:46

morteza ataiy

1,0631 gold badge10 silver badges16 bronze badges

1 Comment

Sidney Sousa Over a year ago

I use yes, but now that you made double check I just noticed that I was placing the code inside a wrong function. Appreciate the support

Collectives™ on Stack Overflow

Laravel add class using if statement

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related