Tengo un paginador vertical para ir a las secciones de la pagina, el inconveniente que presento es que en monitores grandes si se visualiza el paginador, pero en pantallas de portatil no se logra visualizar, estoy utilizando una libreria llamada swiper.

**Libreria Swiper:**

https://swiperjs.com/


**Este es el sitio web:**

https://softwareengineer01.github.io/website_neuro/


**Este el paginador swiper:**

[![introducir la descripción de la imagen aquí][1]][1]


  [1]: https://i.sstatic.net/dVEkN.png



**Código css:**

    .swiper-slide {
       overflow: hidden
    }
    .swiper-button-prev,
    .swiper-button-next {
        width: 4rem;
        height: 4rem;
        border-radius: 50%
    }
    .swiper-button-prev:hover,
    .swiper-button-next:hover {
        background-color: rgba(255, 255, 255, .2)
    }
    .swiper-button-prev:active,
    .swiper-button-next:active {
        background-color: rgba(225, 225, 225, .15)
    }
    .swiper-button-prev::after,
    .swiper-button-next::after {
        content: "";
        position: absolute;
        inset: 0;
        -webkit-mask: url("../img/icon-next.svg") no-repeat center/contain;
        mask: url("../img/icon-next.svg") no-repeat center/contain;
        background-color: var(--clr-neutral-100)
    }
    .swiper-button-prev::after {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
    .swiper-horizontal .swiper-scrollbar {
        position: unset
    }
    .swiper .swiper-scrollbar {
        max-width: 20rem;
        height: 4px;
        margin: 0 auto;
        border-radius: 10px;
        overflow: hidden;
        background-color: var(--clr-neutral-30)
    }
    .swiper .swiper-scrollbar-drag {
        background-color: #c7cdd9
    }

    .main-swiper {
       height: 100vh
    }
    .main-swiper__next {
        width: 2.5rem;
        height: 2.5rem;
        right: unset;
        top: unset;
        left: 50%;
        bottom: 1.25rem;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0)
    }
    .main-swiper__next--end {
        bottom: calc(var(--footer-height) + 0.5rem)
    }
    .main-swiper__next::after {
        -webkit-mask-image: url("../img/icon-next-section.svg");
        mask-image: url("../img/icon-next-section.svg")
    }
    .main-swiper__pagination .swiper-pagination-bullet {
        display: grid !important;
        place-items: center;
        width: 2rem;
        height: 2rem;
        position: relative;
        background-color: #4d4d4d;
        opacity: 1;
        font-size: 1.25rem;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 700;
        line-height: 1;
        color: #fff
    }
    .main-swiper__pagination .swiper-pagination-bullet-active {
        background-color: var(--clr-primary);
        color: #fff
    }
    .main-swiper__pagination .swiper-pagination-bullet:hover .swiper-pagination-label {
        opacity: 1
    }
    .main-swiper__pagination .swiper-pagination-label {
        opacity: 0;
        padding-right: .5rem;
        position: absolute;
        top: 50%;
        left: 0;
        -webkit-transform: translate3d(-100%, -50%, 0);
        transform: translate3d(-100%, -50%, 0);
        font-size: 1.125rem;
        font-family: Arial;
        font-weight: 700;
        color: #fff;
        text-transform: uppercase;
        white-space: nowrap;
        pointer-events: none
    }
    section {
        min-height: 100vh;
        padding-top: var(--navbar-height)
    }
    @media screen and (max-height: 41.625rem),
    (max-width: 74.9375rem) {
        .main-swiper {
            height: auto;
            overflow: unset
        }
        .main-swiper__pagination,
        .main-swiper__next {
            display: none
        }
        .main-swiper__wrapper {
            all: unset
        }
        .main-swiper__wrapper>.swiper-slide {
            height: auto !important
        }
    }


**Código JS:**

   

        (() => {
      const e = document.querySelectorAll("[data-dynamic='year']");
      e.forEach((e) => {
          var r = new Date().getFullYear();
          e.textContent = r;
      });
    })(),
      (() => {
          const r = document.querySelector(".l-header"),
              e = document.querySelectorAll("[data-bg-alt]");
          var s = document.querySelector(".s-contact");
          const i = document.querySelector(".main-swiper__next"),
              n = document.querySelector(".navbar-toggler"),
              t = new IntersectionObserver(
                  ([e]) => {
                      e.isIntersecting ? r.classList.add("l-header--dark") : r.classList.remove("l-header--dark");
                  },
                  { root: null, threshold: 0.1 }
              );
          e.forEach((e) => {
              t.observe(e);
          });
          const a = new IntersectionObserver(
              ([e]) => {
                  if (e.isIntersecting) return i.classList.add("main-swiper__next--end");
                  i.classList.remove("main-swiper__next--end");
              },
              { root: null, threshold: 0.1 }
          );
          a.observe(s);
          n.addEventListener("click", () => {
              r.classList.toggle("l-header--actived");
          });
      })(),
      (() => {
          const s = ["Inicio", "Cómo funciona", "Quiénes somos", "Servicios", "Experiencia", "Respaldo", "Contáctenos"],
              e = {
                  direction: "vertical",
                  mousewheelControl: !0,
                  slidesPerView: 1,
                  speed: 600,
                  mousewheel: !0,
                  allowTouchMove: !1,
                  navigation: { nextEl: ".main-swiper__next" },
                  pagination: {
                      el: ".main-swiper__pagination",
                      clickable: !0,
                      renderBullet: function (e, r) {
                          return `
              <span class="${r}">
                ${e + 1}
                <span class="swiper-pagination-label">${s[e]}</span>
              </span>
            `;
                      },
                  },
              },
              r = document.querySelector(".l-header .navbar-brand");
          let i = new Swiper(".main-swiper", e);
          var n = () => {
              innerHeight < 667 || innerWidth < 1200 ? i.destroy() : (i = new Swiper(".main-swiper", e));
          };
          n(),
              addEventListener("resize", n),
              r.addEventListener("click", (e) => {
                  e.preventDefault(), i.slideTo(0);
              });
      })(),
      (() => {
          const e = [...document.querySelectorAll(".s-preview__card-out-slider .card")],
              n = new Swiper(".s-preview__swiper", { slidesPerView: 1, draggable: !0, loop: !0, navigation: { nextEl: ".s-preview__next", prevEl: ".s-preview__prev" }, breakpoints: { 992: { slidesPerView: 2 } } });
          e.forEach((r) => {
              var s = 'id="card-bottom"',
                  i = (r = r.outerHTML).indexOf(s);
              if (-1 < i) {
                  let e = r.split("");
                  e.splice(i - 1, s.length + 1), (e = e.join("")), (r = e);
              }
              n.prependSlide([`<div class="swiper-slide">${r}</div>`]);
          });
      })(),
      new Swiper(".s-experience__swiper", {
          slidesPerView: 1,
          loop: !0,
          draggable: !0,
          navigation: { nextEl: ".s-experience__next", prevEl: ".s-experience__prev" },
          breakpoints: { 1336: { loop: !1, slidesPerView: 3, spaceBetween: 15 }, 992: { slidesPerView: 2 } },
      }),
      new Swiper(".s-companies__swiper", {
          slidesPerView: 1,
          navigation: { nextEl: ".s-companies__next", prevEl: ".s-companies__prev" },
          spaceBetween: 50,
          scrollbar: { el: ".s-companies__scrollbar", dragSize: "auto", draggable: !0 },
          breakpoints: { 992: { slidesPerView: 4 }, 768: { slidesPerView: 2 } },
      }),
      new Swiper(".s-services__swiper", {
          slidesPerView: 1,
          loop: !0,
          navigation: { nextEl: ".s-services__next", prevEl: ".s-services__prev" },
          pagination: {
              el: ".s-services__pagination",
              clickable: !0,
              renderBullet: function (e, r) {
                  return e++, '<span class="' + r + '">' + (e = String(e).length < 2 ? "0" + e : e) + "</span>";
              },
          },
      }),
      (() => {
          const e = document.querySelector(".c-video__play");
          if (e) {
              const s = e.querySelector("i");
              var { target: r } = e.dataset;
              const i = document.querySelector(r);
              if (!i) throw "There aren't any video to be played";
              e.addEventListener("click", () => {
                  i.paused ? (i.play(), s.classList.replace("fa-play", "fa-pause")) : (i.pause(), s.classList.replace("fa-pause", "fa-play"));
              });
          }
      })();


En pantallas grandes si se muestra, pero en pantallas más pequeñas como portátil no se ve. He intentado cambiar un poco el codigo js también los media queries pero no se muestra el paginador.