Question

我想使用Bootstrap轮播，并且图像应该来自我的数据库

<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>

当我检查页面时，可以看到图像在那里，但是我什么也看不到，因为我需要在div中使用class carousel-item激活该类。

有没有一种方法可以在第一个框上添加活动类？

我尝试使用jQuery，但不起作用：

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

Answer 1

您可以使用The loop variable完成此操作：

@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

Answer 2

您使用

$(document).ready(function(){

喜欢

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

还是不？因为要运行jq代码，您需要等待文档准备就绪！

Laravel使用if语句添加类

2 个答案: