Skip to main content
se eliminaron 225 caracteres en el cuerpo
Origen Enlace
    (() => {
    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"));
            });
        }
    })();
 (() => {
      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"));
          });
      }
  })();
    (() => {
    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"));
            });
        }
    })();
    (() => {
  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"));
          });
      }
  })();
Origen Enlace

No se visualiza paginador - HTML CSS JS

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í

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.