Не работает слайдер, сайт на 1С Битрикс Управление сайтом

Проект с кучей проблем, только-только начал осваивать Битрикс, вот одна из проблем, слайды выводятся в зависимости от сортировки, но не работает навигация переключения слайдов. Заранее благодарю за помощь!

Параметры компонента:

введите сюда описание изображения

Файл компонента template.php

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
$this->setFrameMode(true);



if(count($arResult["ITEMS"])>0){?>

<div class="slider">
    <div class="slider__slides">
        <?$cnt=0;
        foreach ($arResult["ITEMS"] as $arItem) {
            $cnt++;

        $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
        $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
        ?>
        <div class="slide <?=$cnt==1?'s--active':'';?> <?=$cnt==count($arResult["ITEMS"])?'s--prev':'';?>" id="<?=$this->GetEditAreaId($arItem['ID']);?>">
            <div class="slide__inner">
                <div class="img_wrapper">
                    <img src="<?=$arItem['PREVIEW_PICTURE']['SRC']?>" alt="<?=$arItem['~NAME']?>">
                </div>
                <div class="slide__content">
                    <div class="info">
                        <h3 class="header"><?=$arItem['~NAME']?></h3>
                        <?if($arItem['CODE']){?>
                        <a class="btn_my" href="<?=$arItem['CODE']?>">
                            <?if ($arItem['PROPERTIES']['BUTTON_TEXT']['VALUE'] != '') {
                                echo $arItem['PROPERTIES']['BUTTON_TEXT']['VALUE'];
                            } else {?>
                                <?=$arParams['LANG']=='ua'?'Дізнатись детальніше':'Узнать подробнее';?>
                            <?}?>
                            
                        </a>
                        <?}?>
                    </div>
                </div>
            </div>
        </div>
        <?}?>
    </div>
    <!-- slides end -->
    <div>
        <div class="slider__control ">
            <div class="slider__control-line" href="#" role="button" data-slide="prev"></div>
            <div class="slider__control-line"></div>
        </div>
        <div class="slider__control slider__control--right m--right" href="#" role="button" data-slide="next">
            <div class="slider__control-line"></div>
            <div class="slider__control-line"></div>
        </div>
    </div>
</div>

<?}?>

Активировано 2 слайда:

введите сюда описание изображения

Накладываются друг на друга, кнопки навигации не работают:

введите сюда описание изображения


Ответы (0 шт):