How to make a slider to insert into the body of a bitrix article?

Question

1C-Bitrix

Good afternoon,
How to make an image slider from the news
The following was done, but I don’t understand further:
1. Added a new MORE_PHOTO property for the news infoblock.
2. The result_modifier.php file has been created with the following content:

<?
    $arResult["MORE_PHOTO"] = array(); 
    if(isset($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"]) && is_array($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"])){ 
      foreach($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"] as $FILE) { 
        $FILE = CFile::GetFileArray($FILE); 
        if(is_array($FILE)) 
        $arResult["MORE_PHOTO"][] = $FILE; 
      } 
    }
  ?>

3. Added output code to template.php :

<?
$LINE_ELEMENT_COUNT = 2; 
if(count($arResult["MORE_PHOTO"])>0):?>
<?foreach($arResult["MORE_PHOTO"] as $PHOTO):?>
<? $file = CFile::ResizeImageGet($PHOTO, array('width'=>300, 'height'=>'300'), BX_RESIZE_IMAGE_EXACT, true); ?>

<img  src="<?=$file["src"]?>" width="300" height="300">

<?endforeach?>
<?endif?>

But as expected, all images are displayed at once.
How can I make the images appear one by one? So that you can wrap them in a slider
Thank you
PS Recently I just started learning php, along with Bitrix

Answer 1

Wrap the output of images, for example, with a div, and connect any slider library

<div id="slider">
тут ваш цикл
</div>

Next, include the slider library