106 lines
2.8 KiB
Plaintext
106 lines
2.8 KiB
Plaintext
---
|
|
import "swiper/css";
|
|
import "swiper/css/navigation";
|
|
import "swiper/css/pagination";
|
|
import { Icon } from "astro-icon/components";
|
|
|
|
const isHebrew = Astro.currentLocale === "he";
|
|
const { images, class: className, imgClass } = Astro.props;
|
|
---
|
|
|
|
<div class={`bg-white ${className || ''}`}>
|
|
<div class="mx-auto">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
{
|
|
images.map((image) => (
|
|
<div class="swiper-slide">
|
|
<div class="relative">
|
|
{image.text && (
|
|
<div class="uppercase lg:text-9xl md:text-5xl text-4xl text-white text-shadow-lg absolute inset-0 flex items-center justify-center font-secondary z-10">
|
|
{image.text}
|
|
</div>
|
|
)}
|
|
<img
|
|
class={`w-full ${imgClass || ''}`}
|
|
src={image.image.url}
|
|
alt={image.text}
|
|
/>
|
|
{image.text_alt && (
|
|
<div class="text-sm text-white px-4 py-2 italic bg-black/50 absolute bottom-2 right-2 rounded z-10">
|
|
{image.text_alt}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
|
|
<!-- If we need pagination -->
|
|
<div class="swiper-pagination z-50"></div>
|
|
|
|
<!-- If we need navigation buttons -->
|
|
<div class="swiper-button-prev">
|
|
{
|
|
isHebrew && (
|
|
<Icon name="ph:arrow-circle-right-thin" class="text-white" />
|
|
)
|
|
}
|
|
{
|
|
!isHebrew && (
|
|
<Icon name="ph:arrow-circle-left-thin" class="text-white" />
|
|
)
|
|
}
|
|
</div>
|
|
<div class="swiper-button-next">
|
|
{
|
|
isHebrew && (
|
|
<Icon name="ph:arrow-circle-left-thin" class="text-white" />
|
|
)
|
|
}
|
|
{
|
|
!isHebrew && (
|
|
<Icon name="ph:arrow-circle-right-thin" class="text-white" />
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
import Swiper from "swiper";
|
|
import { Navigation, Pagination, Scrollbar } from "swiper/modules";
|
|
|
|
// Re-initialize after every page swap via View Transitions
|
|
document.addEventListener("astro:after-swap", init);
|
|
|
|
function init() {
|
|
const swiper = new Swiper(".swiper", {
|
|
// Optional parameters
|
|
modules: [Navigation, Pagination, Scrollbar],
|
|
loop: true,
|
|
|
|
// If we need pagination
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
},
|
|
|
|
// Navigation arrows
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
|
|
// And if we need scrollbar
|
|
scrollbar: {
|
|
el: ".swiper-scrollbar",
|
|
},
|
|
});
|
|
}
|
|
|
|
// Initialize on the first page load
|
|
init();
|
|
</script>
|