时间戳

首页 > 解决方案 > 在轮播 laravel 中显示和隐藏上一个和下一个元素

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

问题描述

我也是 Laravel 和 Bootstrap 的新手。

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

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

现在，我得到了所有幻灯片，下面有文字......我找不到一些我可以做到这一点的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

你能请有人帮我吗？

标签： laravelbootstrap-4carousel

解决方案

尝试这个：

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

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

推荐阅读