Слайдер swiper на инфоблоках

<?$APPLICATION->IncludeComponent(
            "bitrix:news.list",
            "main_slider",
            Array(
                "ACTIVE_DATE_FORMAT" => "d.m.Y",
                "ADD_SECTIONS_CHAIN" => "N",
                "AJAX_MODE" => "N",
                "AJAX_OPTION_ADDITIONAL" => "",
                "AJAX_OPTION_HISTORY" => "N",
                "AJAX_OPTION_JUMP" => "N",
                "AJAX_OPTION_STYLE" => "Y",
                "CACHE_FILTER" => "N",
                "CACHE_GROUPS" => "Y",
                "CACHE_TIME" => "36000000",
                "CACHE_TYPE" => "A",
                "CHECK_DATES" => "Y",
                "DETAIL_URL" => "",
                "DISPLAY_BOTTOM_PAGER" => "Y",
                "DISPLAY_DATE" => "Y",
                "DISPLAY_NAME" => "Y",
                "DISPLAY_PICTURE" => "Y",
                "DISPLAY_PREVIEW_TEXT" => "Y",
                "DISPLAY_TOP_PAGER" => "N",
                "FIELD_CODE" => array("NAME", "DETAIL_PICTURE", ""),
                "FILTER_NAME" => "",
                "HIDE_LINK_WHEN_NO_DETAIL" => "N",
                "IBLOCK_ID" => "9", //тут изменить на свой
                "IBLOCK_TYPE" => "sliders",//тут изменить на свой
                "INCLUDE_IBLOCK_INTO_CHAIN" => "Y",
                "INCLUDE_SUBSECTIONS" => "Y",
                "MESSAGE_404" => "",
                "NEWS_COUNT" => "30",
                "PAGER_BASE_LINK_ENABLE" => "N",
                "PAGER_DESC_NUMBERING" => "N",
                "PAGER_DESC_NUMBERING_CACHE_TIME" => "36000",
                "PAGER_SHOW_ALL" => "N",
                "PAGER_SHOW_ALWAYS" => "N",
                "PAGER_TEMPLATE" => ".default",
                "PAGER_TITLE" => "Новости",
                "PARENT_SECTION" => "",
                "PARENT_SECTION_CODE" => "",
                "PREVIEW_TRUNCATE_LEN" => "",
                "PROPERTY_CODE" => array("", ""),
                "SET_BROWSER_TITLE" => "N",
                "SET_LAST_MODIFIED" => "N",
                "SET_META_DESCRIPTION" => "N",
                "SET_META_KEYWORDS" => "N",
                "SET_STATUS_404" => "N",
                "SET_TITLE" => "Y",
                "SHOW_404" => "N",
                "SORT_BY1" => "SORT",
                "SORT_BY2" => "ACTIVE_FROM",
                "SORT_ORDER1" => "ASC",
                "SORT_ORDER2" => "DESC",
                "STRICT_SECTION_CHECK" => "N"
            )
        );?>

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
if($arResult["ITEMS"]):   
    $arPhotos = []; ?>
    <div class="sliderContainer swiper sliderContainer--onlySlide mainSlider gallery">
        <div class="sliderItems swiper-wrapper">
            <?foreach($arResult["ITEMS"] as $arItem):
                if($arItem["DETAIL_PICTURE"]):
                    $fileBig = CFile::ResizeImageGet($arItem["DETAIL_PICTURE"], ['width'=>2600, 'height'=>3500], BX_RESIZE_IMAGE_PROPORTIONAL, true);
                    $fileMiddle = CFile::ResizeImageGet($arItem["DETAIL_PICTURE"], ['width'=>1000, 'height'=>2000], BX_RESIZE_IMAGE_PROPORTIONAL, true);
                    $fileSmall = CFile::ResizeImageGet($arItem["DETAIL_PICTURE"], ['width'=>450, 'height'=>1450], BX_RESIZE_IMAGE_PROPORTIONAL, true);
                    $id = uniqid("photomain_");
                    $arPhotos[] = [
                        "id" =>$id,
                        "big" => $fileBig["src"],
                        "middle" => $fileMiddle["src"],
                        "small" => $fileSmall["src"],
                    ];?>
                    
                    <div class="sliderItem swiper-slide" data-caption="<?=$arItem["NAME"]?>" id="<?=$id?>"></div>                

                <?endif;
            endforeach;?>
        </div>
        <div class="sliderCaption sectionText"></div>
        <div class="sliderPagination swiper-pagination"></div>
    </div>
    <style>        
        <?foreach ($arPhotos as $arPhoto):?>
            #<?=$arPhoto["id"]?>{background-image: url(<?=$arPhoto["small"]?>);}            
        <?endforeach;?>
        @media screen and (min-width: 451px) {
            <?foreach ($arPhotos as $arPhoto):?>
                #<?=$arPhoto["id"]?>{background-image: url(<?=$arPhoto["middle"]?>);}            
            <?endforeach;?>            
        }
        @media screen and (min-width: 1001px) {
            <?foreach ($arPhotos as $arPhoto):?>
                #<?=$arPhoto["id"]?>{background-image: url(<?=$arPhoto["big"]?>);}            
            <?endforeach;?>
        }
        
    </style>
<?endif;

<?$APPLICATION->IncludeComponent(
                        "bitrix:news.detail",
                        "slider_modeling",
                        Array(
                            "ACTIVE_DATE_FORMAT" => "d.m.Y",
                            "ADD_ELEMENT_CHAIN" => "N",
                            "ADD_SECTIONS_CHAIN" => "N",
                            "AJAX_MODE" => "N",
                            "AJAX_OPTION_ADDITIONAL" => "",
                            "AJAX_OPTION_HISTORY" => "N",
                            "AJAX_OPTION_JUMP" => "N",
                            "AJAX_OPTION_STYLE" => "Y",
                            "BROWSER_TITLE" => "-",
                            "CACHE_GROUPS" => "Y",
                            "CACHE_TIME" => "36000000",
                            "CACHE_TYPE" => "A",
                            "CHECK_DATES" => "N",
                            "DETAIL_URL" => "",
                            "DISPLAY_BOTTOM_PAGER" => "N",
                            "DISPLAY_DATE" => "N",
                            "DISPLAY_NAME" => "Y",
                            "DISPLAY_PICTURE" => "N",
                            "DISPLAY_PREVIEW_TEXT" => "N",
                            "DISPLAY_TOP_PAGER" => "N",
                            "ELEMENT_CODE" => "",
                            "ELEMENT_ID" => 822,
                            "FIELD_CODE" => array("NAME", ""),
                            "IBLOCK_ID" => "10",
                            "IBLOCK_TYPE" => "sliders",
                            "IBLOCK_URL" => "",
                            "INCLUDE_IBLOCK_INTO_CHAIN" => "N",
                            "MESSAGE_404" => "",
                            "META_DESCRIPTION" => "-",
                            "META_KEYWORDS" => "-",
                            "PAGER_BASE_LINK_ENABLE" => "N",
                            "PAGER_SHOW_ALL" => "N",
                            "PAGER_TEMPLATE" => ".default",
                            "PAGER_TITLE" => "Страница",
                            "PROPERTY_CODE" => array("PHOTOS", ""),
                            "SET_BROWSER_TITLE" => "N",
                            "SET_CANONICAL_URL" => "N",
                            "SET_LAST_MODIFIED" => "N",
                            "SET_META_DESCRIPTION" => "N",
                            "SET_META_KEYWORDS" => "N",
                            "SET_STATUS_404" => "N",
                            "SET_TITLE" => "N",
                            "SHOW_404" => "N",
                            "STRICT_SECTION_CHECK" => "N",
                            "USE_PERMISSIONS" => "N",
                            "USE_SHARE" => "N"
                        )
                    );?>

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
if(!empty($arResult["PROPERTIES"]["PHOTOS"]["VALUE"])):
    $arPhotos = [];?>
    <div class="sliderItems swiper-wrapper">
        <?foreach($arResult["PROPERTIES"]["PHOTOS"]["VALUE"] as $photoId):
            $fileBig = CFile::ResizeImageGet($photoId, ['width'=>2600, 'height'=>3500], BX_RESIZE_IMAGE_PROPORTIONAL, true);
            $fileMiddle = CFile::ResizeImageGet($photoId, ['width'=>1000, 'height'=>2000], BX_RESIZE_IMAGE_PROPORTIONAL, true);
            $fileSmall = CFile::ResizeImageGet($photoId, ['width'=>450, 'height'=>1450], BX_RESIZE_IMAGE_PROPORTIONAL, true);
            $id = uniqid("photo_");
            $arPhotos[] = [
                "id" =>$id,
                "big" => $fileBig["src"],
                "middle" => $fileMiddle["src"],
                "small" => $fileSmall["src"],
            ];
            ?>
            <div class="sliderItem swiper-slide"  id="<?=$id?>"></div>
        <?endforeach;?>
    </div>
    <?if(count($arResult["PROPERTIES"]["PHOTOS"]["VALUE"])>1):?>
       <div class="swiper-button-next"></div>
       <div class="swiper-button-prev"></div>
    <?endif;?>
    <style>        
        <?foreach ($arPhotos as $arPhoto):?>
            #<?=$arPhoto["id"]?>{background-image: url(<?=$arPhoto["small"]?>);}            
        <?endforeach;?>
        @media screen and (min-width: 451px) {
            <?foreach ($arPhotos as $arPhoto):?>
                #<?=$arPhoto["id"]?>{background-image: url(<?=$arPhoto["middle"]?>);}            
            <?endforeach;?>            
        }
        @media screen and (min-width: 1001px) {
            <?foreach ($arPhotos as $arPhoto):?>
                #<?=$arPhoto["id"]?>{background-image: url(<?=$arPhoto["big"]?>);}            
            <?endforeach;?>
        }
        
    </style>
<?endif;