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:
Este es el sitio web:
https://softwareengineer01.github.io/website_neuro/
Este el paginador swiper:
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.