Как правильно задать условие?

Question

[Максим]

Как я могу присвоить класс active только первому элементу из списка, если вывожу их в виде цикла?
Сделал заглушку из статичного файла, но это не решение.

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="upload/iblock/586/5866981ea4405c6a481bab6a10a441f5.jpg" alt="">
    </div>
    <?foreach($arResult["ITEMS"] as $arItem):?>
    <div class="carousel-item">
      <img class="d-block w-100" src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" alt="<?=$arItem["NAME"]?>">
    </div>
    <?endforeach;?>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Предыдущий</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Следующий</span>
  </a>
</div>

Comments

[PetrPo]

<?$i = 0;?>
    <?foreach($arResult["ITEMS"] as $arItem):?>
    <div class="carousel-item<?=($i++ === 0 ? ' active' : '');?>">
      <img class="d-block w-100" src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" alt="<?=$arItem["NAME"]?>">
    </div>
    <?endforeach;?>

Answer 1

[Maxim Kirshin]

Так как в битриксе у массива ключи идут по порядку, можно так:

<?php foreach($arResult["ITEMS"] as $i => $arItem):?>
    <?php $carouselActiveClass = $i === 0 ? 'active' : '' ?>
    <div class="carousel-item <?= $carouselActiveClass ?>">
      <img class="d-block w-100" src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" alt="<?=$arItem["NAME"]?>">
    </div>
    <?php endforeach;?>

Comments

[Максим]

Да, это то, что нужно)
Спасибо! А то я пытался выбирать с помощью jquery

Answer 2

[alekseyHunter]

Через JS. Селектором выбери первый элемент с твоим класс и добавь ему класс active.