(() => {
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"));
});
}
})();
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:
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.
default