0

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.

5
  • Tenes habilitado el scroll??
    – Alfa Rojo
    Commented el 7 oct. 2021 a las 15:59
  • Hola @AlfaRojo como puedo verificar esa parte, gracias Commented el 7 oct. 2021 a las 17:05
  • Tratale de hacer scroll en las pantallas que no se ve... Sii no hace scroll, busca como habilitarlo. Puede que eso sea, puede que no
    – Alfa Rojo
    Commented el 7 oct. 2021 a las 18:57
  • Edite la pregunta añadiendo todo el javascript, de la web, pero no identifico nada referente al scroll Commented el 7 oct. 2021 a las 21:53
  • Sii, pero la cuestión es que habilites el scroll en tu html/css para ver sii eso te soluciona, a mi me pasaba, con columnas, y habilitando el scroll pues ya podía ver todo
    – Alfa Rojo
    Commented el 7 oct. 2021 a las 22:07

1 respuesta 1

0

El paginador que indicas desaparece por este fragmento en el CSS...

.main-swiper__pagination,
.main-swiper__next {
    display: none
}

...el cual esta dentro de esta condición:

@media screen and (max-height: 41.625rem),
(max-width: 74.9375rem) {

Al llegar a un límite de ancho de ventana se cumple la condición y display pasa a none. La solución no es simplemente quitar esa parte, porque se muestra debajo de todo en la página. Puedes probar adicionar los estilos necesarios dentro de la condición para que se muestre donde desees.

3
  • Hola gracias por las respuestas, sin embargo viendo el código que dice @Trekkium, Realizando la modificación en esos estilos no se logra visualizar, intente cambiando la resolución, eliminando ese fragmento de código pero aún así no se ve visualiza, seguiré intentándolo, gracias chicos Commented el 8 oct. 2021 a las 13:06
  • Si desactivas el estilo display:none (con las dev tools es lo más fácil) el paginador si se visualiza, pero debajo de todo, después del pie del sitio. Necesitas estilos adicionales para reubicarlo. Lo he probado y lo estoy viendo ahora mismo.
    – Trekkium
    Commented el 8 oct. 2021 a las 14:49
  • Si ya logre observa lo que me dices, voy a buscar la forma de poder organizarlo, gracias Commented el 8 oct. 2021 a las 19:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.