Как менять подсветку стрелок при смене слайдов в swiper?

Question

[budda674]

В слайдере 2 стрелки для переключения в виде svg. Нужно изначально сделать стрелку назад fill-opacity .4, если слайд сменился то дать этой стрелке fill-opacity .8.Если слайдер пролистал до последнего слайда либо пользователь это сделал, то стрелке вперед дать fill-opacity .4. изучал эвенты в доках, но во первых не нашел подходящего, во вторых, тот же slideChange не делает того что нужно при смене слайдов, он делает стрелку сразу активной. Кто сталкивался с таким?

const mainSlider = new Swiper('.slider',{
    // autoplay: {
    //     delay: 5000,
    // },
    navigation: {
        nextEl: '.swiper__next',
        prevEl: '.swiper__prev',
    },
    on: {
        slideChange: function (){
            document.querySelector('.swiper__prev_sett svg path').style.fillOpacity = '0.8';
        }
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
            return '<span class="pagination__line + ' + className + '"></span>';
        },
    },
    touchRatio: 0,
    simulateTouch: false,
    loop: true,

})

Comments

[Ankhena]

Там даже стили для таких стрелок есть

.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}

[budda674]

Ankhena, да навешать или переписать стили вообще не проблема. Вопрос: на какое событие реагировать, или самому какой код писать, я не могу придумать за что цепляться

[Ankhena]

budda674, свайпер работает из коробки именно так, как вы описали. Если стрелка недоступна для листания, то ей задается класс.

[Сергей delphinpro]

budda674, не надо ничего писать, всё уже написано за вас =)
ну разве что стили переопределить на нужные вам.

[budda674]

Сергей delphinpro, я может не допонял, но у меня стандартные стрелки отключены, вместо них стоят svg кастомные, я на них повесил классы, и вписал в настройки свайпера

navigation: {
        nextEl: '.swiper__next',
        prevEl: '.swiper__prev',
    },

Стандартные стрелки выводятся через псевдоэлемент, а мои стрелки непосредственно в html. Вы предлагаете изменить стили, и заменить стандартные на свои?

[Ankhena]

budda674, хоть бы выложили в песочницу на jsfiddle.net что вы там натворили. Так, чтобы было видно в чем проблема.

[budda674]

Ankhena, уже разобрался, повесил стандартные классы, убрал позиционирование и шрифты для стандартных псевдоэлементов, и все заработало как хотел. Всем спасибо за ответы!