The first element of the slider is duplicated, how to fix it?

Question

JavaScript

A slider has been made on the main https://posteffect.ru/ .
3 slides are activated, but for some reason 5 elements are displayed. First and last class="bx-clone". Because of this, links on banners are not clickable.
Slider Output

<? if (!empty($arResult['ITEMS'])): ?>
    <div class="promo"><span class="bx-slider-prev"></span><span class="bx-slider-next"></span>
        <div class="slider">
            <ul class="list-unstyled list-inline">
                <? foreach ($arResult['ITEMS'] as $arItem): ?>
                    <li>
                        <? if (!empty($arItem['DISPLAY_PROPERTIES']['LINK']['VALUE'])): ?>
                            <? if ('Y' === $arItem['DISPLAY_PROPERTIES']['LINK_EXTERNAL']['VALUE_XML_ID']): ?>
                            <? endif; ?>
                            <a href="<?= $arItem['DISPLAY_PROPERTIES']['LINK']['VALUE']; ?>" title="<?= $arItem['PREVIEW_TEXT']; ?>" <? if ('Y' === $arItem['DISPLAY_PROPERTIES']['LINK_EXTERNAL']['VALUE_XML_ID']): ?>rel="nofollow"<? endif; ?>>
                        <? endif; ?>
                            <? if ($arItem['DISPLAY_PROPERTIES']['IMAGE_1000']['FILE_VALUE']['SRC']): ?>
                                <span class="visible-md visible-lg slide-1000" style="background: url('<?= $arItem['DISPLAY_PROPERTIES']['IMAGE_1000']['FILE_VALUE']['SRC']; ?>'); background-position: center <?= $arItem['DISPLAY_PROPERTIES']['POSITION_1000']['VALUE_XML_ID']; ?>;"></span>
                            <? endif; ?>
                            <? if ($arItem['DISPLAY_PROPERTIES']['IMAGE_720']['FILE_VALUE']['SRC']): ?>
                                <span class="visible-sm slide-720" style="background: url('<?= $arItem['DISPLAY_PROPERTIES']['IMAGE_720']['FILE_VALUE']['SRC']; ?>'); background-position: center <?= $arItem['DISPLAY_PROPERTIES']['POSITION_720']['VALUE_XML_ID']; ?>;"></span>
                            <? endif; ?>
                            <? if ($arItem['DISPLAY_PROPERTIES']['IMAGE_480']['FILE_VALUE']['SRC']): ?>
                                <span class="visible-xs slide-480" style="background: url('<?= $arItem['DISPLAY_PROPERTIES']['IMAGE_480']['FILE_VALUE']['SRC']; ?>'); background-position: center <?= $arItem['DISPLAY_PROPERTIES']['POSITION_480']['VALUE_XML_ID']; ?>;"></span>
                            <? endif; ?>
                            <? if ($arItem['DISPLAY_PROPERTIES']['IMAGE_320']['FILE_VALUE']['SRC']): ?>
                                <span class="visible-xs slide-320" style="background: url('<?= $arItem['DISPLAY_PROPERTIES']['IMAGE_320']['FILE_VALUE']['SRC']; ?>'); background-position: center <?= $arItem['DISPLAY_PROPERTIES']['POSITION_320']['VALUE_XML_ID']; ?>;"></span>
                            <? endif; ?>
                        <? if (!empty($arItem['DISPLAY_PROPERTIES']['LINK']['VALUE'])): ?>
                            </a>
                            <? if ('Y' === $arItem['DISPLAY_PROPERTIES']['LINK_EXTERNAL']['VALUE_XML_ID']): ?>
                            <? endif; ?>
                        <? endif; ?>
                    </li>
                <? endforeach; ?>
            </ul>
        </div>
        <div id="bx-pager" class="pagination text-center">
            <? foreach ($arResult['ITEMS'] as $index => $arItem): ?>
                <a href="#" title="<?= $arItem['NAME']; ?>" data-slide-index="<?= $index; ?>"></a>
            <? endforeach; ?>
        </div>
    </div>
<? endif; ?>

Answer 1

Links are not clickable not because of the number of slides, but because they have e.preventDefault, and the slides are duplicated in order to have infinite scrolling

Answer 2

Use the OWL slider and you will have exactly the same functionality as on that site!