Как сделать работу таких кнопок на swiper.js?

Question

[Vladislav]

Вот посмотрите 3-ий пример, появление и исчезновение кнопок, как сделать такой принцип работу на swiper.js?
https://obninsksite.ru/blog/html-and-css/156-slajd...

Answer 1

[KRHD]

У swiper выставляется класс когда доходишь до последнего элемента, у этого класса opacity: 0.5; вроде, дак сделай opacity: 0;

Answer 2

[Дмитрий Комчев]

.swiper-button-disabled {
  opacity: 0;
}

Answer 3

[Air_Sidney]

у меня навигации стрелочной нет, но для пагинации я так делал.
у меня на проекте gsap, поэтому я им, но можно и на чистом js

export function swiperInit() {
    let swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        speed: 2000,
        loop: true,
        autoplay: {
            // delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: '#swiper-pagination',
            clickable: true,
            hideOnClick: true
        },
    });

    swiper.on('slideChangeTransitionStart', function () {
        gsap.set("#swiper-pagination", {opacity: 0});
        console.log('slideChangeTransitionStart')
    });

    swiper.on('slideChangeTransitionEnd', function () {
        gsap.to("#swiper-pagination", 0.3, {opacity: 1, ease: "easeOut"});
        console.log('slideChangeTransitionEnd')

    });
}