在轮播 laravel 中显示和隐藏上一个和下一个元素

Question

我也是 Laravel 和 Bootstrap 的新手。

我正在尝试在 carousel 中显示数据库中的数据。

在数据库中，我已经用文本填充了几行，我想在每个 slide 上显示每个 row。当我点击箭头时，一行/幻灯片隐藏，另一行/幻灯片将显示。

现在，我得到了所有幻灯片，下面有文字...我找不到一些我可以这样做的 javascript：

@foreach($cards as $card)

<div id="myCarousel" class="carousel slide" data-toggle="collapse" data-ride="carousel" data-interval="false">
    <div class="carousel-inner">


        <div class="carousel-item active">
            <div class="carousel-caption">
                <h3>...</h3>
                <p class="carousel_text">{{ $card->text }}</p>
            </div>
        </div>

    </div>

    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
@endforeach

你能帮我解决这个问题吗？

Answer 1

试试这个：

<div id="myCarousel" class="carousel slide" data-toggle="collapse" data-ride="carousel" data-interval="false">
    <div class="carousel-inner">
       <?php $index = 0; ?>
       @foreach($cards as $card)
          <div class="carousel-item {{ $index == 0 ? "active" : "" }}">
            <div class="carousel-caption">
                <h3>...</h3>
                <p class="carousel_text">{{ $card->text }}</p>
            </div>
        </div>
         <?php $index++; ?>
       @endforeach
    </div>

    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

让我知道这是否有效！ 谢谢你。