Where do extra styles in layout come from?

Question

HTML

Good day.
There is such a code

<a href="" class="main-info__catalog__products-item swiper-slide swiper-slide-item-choice">
        <div class="main-info__catalog__products-image">
            <img alt="" src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>"/>
        </div>
        <div class="main-info__catalog__products-item-info">
            <div class="main-info__catalog__products-item-title">
                <span class="main-info__catalog__products-item-cost cost-for-card">4,0 руб</span>
                <span class="main-info__catalog__products-item-label item-hit">Хит</span>
            </div>
            <p class="main-info__catalog__products-item-type description-text-black"><?=$arItem["NAME"]?></p>
            <p class="main-info__catalog__products-item-count"><?=$arItem["PREVIEW_TEXT"]?></p>
        </div>
    </a>

When it is integrated into the Bitrix core, extra styles come out and the layout is all distorted.

<a href="" class="main-info__catalog__products-item swiper-slide swiper-slide-item-choice swiper-slide-duplicate swiper-slide-active" data-swiper-slide-index="3" style="width: 1350px; margin-right: 15px;" role="group" aria-label="1 / 6">

According to the layout, there should be several elements on the page, but in fact, one for the entire width.
What could be the problem?

Answer 1

Judging by the fact that you have swiper-slide, it means that the swiper slider library is used, so it adds the rest of the styles and classes, and also makes element clones. This is the normal behavior of such libraries. Check the network for its possible settings in order to better configure it for your needs.