Отображение и скрытие предыдущих и следующих элементов в карусели

Question

Я новичок в Laravel и Bootstrap.

Я пытаюсь отобразить данные из базы данных в карусель .

В базе данных я заполнил несколько строк текстом, и я хотел бы отобразить каждую строку на каждом слайде . Когда я нажимаю стрелка , одна строка / слайд скрыть , а другая строка / слайд будет показывать .

Теперь я получаю все слайды с текстом друг под другом ... Я не могу найти какой-то 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>

Дайте мне знать, если это работает! Спасибо.