How to fix the slider arrows in gallery.phtml

Question

the arrows in the product slider sometimes are hidden, and this is for the class binding that's here

<div class="absolute top-1/2 left-0 w-full flex items-center justify-between flex-1" style="transform: translateY(-50%);">
                <button
                    aria-label="<?= $escaper->escapeHtml(__('Previous')) ?>"
                    class="text-black bg-transparent flex items-center justify-center button-prev"
                    :class="{ 'opacity-25 pointer-events-none' : activeSlide === 0, 'hidden' : !isSlider }"
                    @click="scrollPrevious" >
                    <?= $heroicons->arrowLeftHtml("w-10 h-10 font-normal") ?>

                </button>
                <button
                    aria-label="<?= $escaper->escapeHtml(__('Next')) ?>"
                    class="text-black transform bg-transparent flex items-center justify-center button-next"
                    :class="{ 'opacity-25 pointer-events-none' : activeSlide > itemCount-pageSize, 'hidden' : !isSlider }"
                    @click="scrollNext">
                    <?= $heroicons->arrowRightHtml("w-10 h-10 font-normal") ?>
                </button>
            </div>

So the class binding is correct, cause:

1. I want the arrows to disappear if there are not enough pictures to have the need of these arrows

2. I want that the right/left arrow get the opacity class when there's no more product pictures to see

These down here are the functions that are used for all of this to work, something is wrong here maybe?

  getSlider() {
                return this.$refs.jsThumbSlides;
            },
            calcPageSize() {
                const slider = this.getSlider();
                if (slider) {
                    const slideEl = slider.querySelector('.js_thumbs_slide'),
                        marginRight = parseInt(window.getComputedStyle(slideEl).marginRight);

                    this.itemCount = slider.querySelectorAll('.js_thumbs_slide').length;
                    this.pageSize = Math.round(slider.clientWidth / (slideEl.clientWidth + marginRight));
                    this.pageFillers = (
                        this.pageSize * Math.ceil(this.itemCount / this.pageSize)
                    ) - this.itemCount;

                    this.isSlider = this.itemCount > 4;
                }
            },
            calcActive() {
                const slider = this.getSlider();
                if (slider) {
                    const sliderItems = this.itemCount + this.pageFillers;
                    const calculatedActiveSlide = slider.scrollLeft / (slider.scrollWidth / sliderItems);
                    this.activeSlide = Math.round(calculatedActiveSlide / this.pageSize) * this.pageSize;
                }
            },
            scrollPrevious() {
                this.scrollTo(this.activeSlide - this.pageSize);
            },
            scrollNext() {
                this.scrollTo(this.activeSlide + this.pageSize);
            },
            scrollTo(idx) {
                const slider = this.getSlider();
                if (slider) {
                    const slideWidth = slider.scrollWidth / (this.itemCount + this.pageFillers);
                    slider.scrollLeft = Math.floor(slideWidth) * idx;
                    this.activeSlide = idx;
                }
            },
            checkIsMobileResolutionFilter() {
                this.isDesktop = window.matchMedia('(min-width: 1024px)').matches;
            },