sergio/saladeaula.digital
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-04-21 12:17:14 -03:00
parent ae71d5a7ce
commit 24392f795b
12 changed files with 363 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
superpage/src/components/Carousel.astro
View File

@@ -5,48 +5,48 @@ const { items = [] } = Astro.props
---
<div id="carousel" class="relative">
<button id="prev" class="inset-y-0 left-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-10">
<ChevronLeftIcon className="w-6" />
</button>
<button id="prev" class="inset-y-0 left-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-10">
<ChevronLeftIcon className="w-6" />
</button>
<button id="next" class="inset-y-0 right-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-10">
<ChevronRightIcon className="w-6" />
</button>
<button id="next" class="inset-y-0 right-0 px-1.5 bg-white/10 absolute cursor-pointer lg:hidden z-10">
<ChevronRightIcon className="w-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) => (
<div class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center z-0" key={idx}>
<Component class="size-48 lg:size-38 fill-white" id={`slide${idx + 1}`} />
</div>
))
}
</div>
<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) => (
<div class="snap-center flex-shrink-0 max-lg:w-full flex justify-center itens-center z-0">
<Component class="size-48 lg:size-38 fill-white" id={`slide${idx + 1}`} />
</div>
))
}
</div>
</div>
<script>
const carousel = document.getElementById('carousel')
const slides = carousel.querySelectorAll('.snap-center')
let currentIndex = 0
const carousel = document.getElementById('carousel')
const slides = carousel.querySelectorAll('.snap-center')
let currentIndex = 0
const scrollToSlide = (index) => {
if (index >= 0 && index < slides.length) {
slides[index].scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center',
})
currentIndex = index
const scrollToSlide = (index) => {
if (index >= 0 && index < slides.length) {
slides[index].scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center',
})
currentIndex = index
}
}
}
document.getElementById('prev').addEventListener('click', () => {
scrollToSlide(currentIndex - 1)
})
document.getElementById('prev').addEventListener('click', () => {
scrollToSlide(currentIndex - 1)
})
document.getElementById('next').addEventListener('click', () => {
scrollToSlide(currentIndex + 1)
})
document.getElementById('next').addEventListener('click', () => {
scrollToSlide(currentIndex + 1)
})
</script>