72 lines
1.7 KiB
Plaintext
72 lines
1.7 KiB
Plaintext
---
|
|
import { Icon } from "astro-icon/components";
|
|
|
|
const { items = [] } = Astro.props;
|
|
---
|
|
|
|
<div data-ride="carousel" class="relative">
|
|
<button
|
|
data-toggle="prev"
|
|
class="inset-y-0 left-0 px-1.5 absolute cursor-pointer lg:hidden z-1"
|
|
aria-label="Anterior"
|
|
>
|
|
<Icon name="chevron-left" class="size-6" />
|
|
</button>
|
|
|
|
<button
|
|
data-toggle="next"
|
|
class="inset-y-0 right-0 px-1.5 absolute cursor-pointer lg:hidden z-1"
|
|
aria-label="Próximo"
|
|
>
|
|
<Icon name="chevron-right" class="size-6" />
|
|
</button>
|
|
|
|
<div
|
|
class="flex max-lg:overflow-x-scroll max-lg:snap-x snap-mandatory scroll-smooth scrollbar-hide space-x-4 lg:gap-8 lg:justify-center"
|
|
>
|
|
{
|
|
items.map((Component, idx: number) => (
|
|
<div
|
|
class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center"
|
|
id={`slide${idx + 1}`}
|
|
>
|
|
<Component class="size-48 lg:size-38 fill-white" />
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const carousel = document.querySelector("[data-ride=carousel]");
|
|
const slides = carousel?.querySelectorAll(".snap-center");
|
|
let currentIndex = 0;
|
|
|
|
const scrollToSlide = (index: number) => {
|
|
if (!slides) {
|
|
return;
|
|
}
|
|
|
|
if (index >= 0 && index < slides.length) {
|
|
slides[index].scrollIntoView({
|
|
behavior: "smooth",
|
|
block: "nearest",
|
|
inline: "center",
|
|
});
|
|
currentIndex = index;
|
|
}
|
|
};
|
|
|
|
carousel
|
|
?.querySelector("[data-toggle=prev]")
|
|
?.addEventListener("click", () => {
|
|
scrollToSlide(currentIndex - 1);
|
|
});
|
|
|
|
carousel
|
|
?.querySelector("[data-toggle=next]")
|
|
?.addEventListener("click", () => {
|
|
scrollToSlide(currentIndex + 1);
|
|
});
|
|
</script>
|