Module «nav-arrows». Часто используемая структура стрелок для слайдеров.

Source:

https://html.ildar-meyker.ru/html-kgeu/components.html?tab=tab-navs

Демо:

https://codepen.io/ildar-meyker/pen/qBgxYNZ

Плагины:

Подключение:

//

Разметка:

//

<nav class="nav-arrows">
    <button class="nav-arrows__item js-slider-prev">
        <svg class="icon nav-arrows__icon flip-x">
            <use
                xlink:href="img/icons/general/sprite.svg#arrow-right"
            ></use>
        </svg>
    </button>
    <button class="nav-arrows__item js-slider-next">
        <svg class="icon nav-arrows__icon">
            <use
                xlink:href="img/icons/general/sprite.svg#arrow-right"
            ></use>
        </svg>
    </button>
</nav>

Стили:

//
.nav-arrows {
    display: flex;
    align-items: center;
    gap: 2px;

    &__item {
        @include reset-button;
        width: 8rem;
        height: 4rem;
        background: #eff1f4;
        border-radius: 2em;
        display: flex;
        justify-content: center;
        align-items: center;

        &:not(.swiper-button-disabled):hover {
            background: #0047ba;

            .nav-arrows__icon {
                stroke: #fff;
            }
        }

        &.swiper-button-disabled {
            opacity: 0.5;
            cursor: default;
        }
    }

    &__icon {
        width: 3rem;
        height: 3rem;
        stroke: #000;
    }
}

Инициализация:

//