How to correctly display a multiple property with a condition?

Question

1C-Bitrix

Good time,
I display the multiple property file. a specific slider is used.

here is the layout, where the output of the property

<div class="swiper-slide">
     <div class="news-slider__item">

                 <!-- вывод 1 картинки -->
                  <div class="news-slider__image-large">
                              <img src="img/slide1.jpg" width="" height="" alt="">
                  </div>

                 <!-- вывод остальных 3 картинок  -->
                  <div class="news-slider__image-small">
                             <img src="img/slide2.jpg" width="" height="" alt=" title="">
                            <img src="img/slide3.jpg" width="" height="" alt="" title="">
                            <img src="img/slide4.jpg" width="" height="" alt="" title="">
                  </div>

                </div>
              </div>

those. I load 4 pictures into the property,
in fact, all the files are displayed, but I don’t understand how to give a condition so that the first picture goes into a div,
and the rest in its own div-e.

maybe you need something like this design ?? is as an example with a condition, it clear business does not fulfill.

<?if($arResult['GALLERY_PHOTOS']) { //проверка на картинки?>
<?  
$count = 0;
foreach ($arResult['GALLERY_PHOTOS'] as $key => $photo) { 
$count++;	
?>

<div class="swiper-slide">
  <div class="news-slider__item">	
                    
    <?if($count == 1):?>
      <div class="news-slider__image-large">
        <img src="<?=$photo['SRC_BIG'];?>" alt="<?=$photo['ALT'];?>" title="<?=$photo['TITLE'];?>">
      </div>
     <?endif;?>
      <div class="news-slider__image-small">
        <img src="<?=$photo['SRC_SMALL'];?>" alt="<?=$photo['ALT'];?>">
      </div>
               	
</div>
</div>		
<?}?>
<?}?>

Answer 1

To display the first image as a div, you don’t need any special tricks:

<div class="news-slider__image-large">
    <img src="<?=$arResult['GALLERY_PHOTOS'][0]['SRC_BIG'];?>" alt="<?=$arResult['GALLERY_PHOTOS'][0]['ALT'];?>" title="<?=$arResult['GALLERY_PHOTOS'][0]['TITLE'];?>">
</div>

The rest of the pictures are already displayed in the usual foreach loop , only skipping the first element in the loop. Or in a for loop , setting the counter initially to position 1:

<div class="news-slider__image-small">
    <?for ($i = 1; $i < count($arResult['GALLERY_PHOTOS']); $i++):?>
        <img src="<?=$arResult['GALLERY_PHOTOS'][$i]['SRC_SMALL'];?>" alt="<?=$arResult['GALLERY_PHOTOS'][$i]['ALT'];?>">
    <?endfor;?>
</div>

Answer 2

All the rules, output. It remains to transfer the image from small photos to a large block.
At the moment, according to the indicated solution,
there is 1 photo in the large block and 3 small photos in another block,
but scrolling through, 1 photo remains in the large block, how to pass the parameter so that the 2nd photo goes to the large block?
Now the output loop looks like this:

<div class="swiper-wrapper">
<?if($arResult['GALLERY_PHOTOS']) { ?>
  <?foreach ($arResult['GALLERY_PHOTOS'] as $key => $photo) { ?>
        
    <div class="swiper-slide">
      <div class="news-slider__item">

        <div class="news-slider__image-large">
          <img src="<?=$arResult['GALLERY_PHOTOS'][0]['SRC_BIG'];?>" alt="<?=$arResult['GALLERY_PHOTOS'][0]['ALT'];?>" title="<?=$arResult['GALLERY_PHOTOS'][0]['TITLE'];?>">
        </div>

        <div class="news-slider__image-small">
        <?for ($i = 1; $i < count($arResult['GALLERY_PHOTOS']); $i++):?>
          <img src="<?=$arResult['GALLERY_PHOTOS'][$i]['SRC'];?>" alt="<?=$arResult['GALLERY_PHOTOS'][$i]['ALT'];?>">
        <?endfor;?>
        </div>
      </div>
    </div>

  <?}?>
<?}?>			

</div>

 <div class="swiper-pagination"></div>

 <div class="news-slider__btn next-slide">Далее&nbsp;<svg class="icon" width="16" height="16"><use xlink:href="/img/icons/icon-sprite.svg#icon-right-arrow"></use></svg></div>
<div class="news-slider__btn prev-slide"><svg class="icon" width="16" height="16"><use xlink:href="/img/icons/icon-sprite.svg#icon-left-arrow"></use></svg>&nbsp;Назад</div>

Those. you need to get the next photo in a large block after listing. It to receive a similar variant?

<?for ($i = 1; $i < count($arResult['GALLERY_PHOTOS']); $i++):?>