52 lines
1.7 KiB
Plaintext
52 lines
1.7 KiB
Plaintext
package component
|
|
|
|
type CarouselEntry struct {
|
|
ImgPath string
|
|
Title string
|
|
Text string
|
|
}
|
|
|
|
func getEntry(arr []CarouselEntry, index int) CarouselEntry {
|
|
newIndex := index
|
|
for newIndex < 0 {
|
|
newIndex += len(arr)
|
|
}
|
|
newIndex = newIndex % len(arr)
|
|
return arr[newIndex]
|
|
}
|
|
|
|
templ Carousel(elm []CarouselEntry , index int) {
|
|
<div id="carousel-parent">
|
|
<div class="flex items-center gap-x-13 md:gap-x-28 lg:gap-x-52 2xl:gap-x-96 xl:text-lg">
|
|
|
|
<div class="relative z-10">
|
|
<button class="top-1/2 left-0 border-none bg-transparent p-0 absolute -translate-y-1/2 bg-black "
|
|
hx-post="/carousel/previous"
|
|
hx-trigger="click"
|
|
hx-target="#carousel-parent"
|
|
>
|
|
<img src={getEntry(elm, index - 1).ImgPath} class="h-28 w-56 md:h-40 md:w-80 xl:h-64 xl:w-156 rounded object-cover bg-neutral-800"/>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="relative text-center z-20">
|
|
<img src={getEntry(elm, index).ImgPath} class="h-32 w-64 md:h-48 md:w-96 xl:h-82 xl:w-164 rounded object-cover bg-neutral-800"/>
|
|
<div class="bg-gradient-to-t from-black/30 absolute bottom-0 left-0 h-32 w-64 md:h-48 md:w-96 xl:h-82 xl:w-164 rounded"></div>
|
|
<p class="absolute text-neutral-300 bottom-0.5 left-5">{getEntry(elm, index).Title}</p>
|
|
</div>
|
|
|
|
<div class="relative z-0">
|
|
<button class="top-1/2 right-0 border-none bg-transparent p-0 absolute -translate-y-1/2 "
|
|
hx-post="/carousel/next"
|
|
hx-trigger="click"
|
|
hx-target="#carousel-parent"
|
|
>
|
|
<img src={getEntry(elm, index + 1).ImgPath} class="h-28 w-56 md:h-40 md:w-80 xl:h-64 xl:w-156 rounded object-cover bg-neutral-800"/>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
<p class="text-center font-thin">{getEntry(elm, index).Text}</p>
|
|
</div>
|
|
}
|