AstroJS component support

[Robin-Wils]

I have tried to use splide in AstroJS without much luck. In theory it shouldn't be too hard, but somehow I can't get the translations working.

All suggestions are welcome. I really want to get this working. Trying to use svelte within AstroJS has been done too, without luck.

Here is the code I have played with:

---
import { Icon } from "astro-icon";
import Container from "../Container.astro";

import "@splidejs/splide/dist/css/splide-core.min.css";

const { imageData, header, background, color } = Astro.props;

import i18next from "i18next";
const { t, setDefaultNamespace } = i18next;

setDefaultNamespace("SplideCarousel");
const carouselTranslations = {
  prev: t("prev"),
  next: t("next"),
  first: t("first"),
  last: t("last"),
  slideX: t("slideX"),
  pageX: t("pageX"),
  play: t("play"),
  pause: t("pause"),
  carousel: t("carousel"),
  select: t("select"),
  slide: t("slide"),
  slideLabel: t("slideLabel"),
};

console.log(carouselTranslations || 'No translations found');
---
<Container color={color} background={background}>
  <h1>{header}</h1>
  <section class="splide" aria-label="gallery">
    <div class="splide__track">
      <ul class="splide__list">
        {
          imageData &&
            imageData.map(
              (image: { src: string | null; alt: string | null }) => (
                <li class="splide__slide">
                  <img src={image.src} alt={image.alt} loading="lazy" />
                </li>
              )
            )
        }
      </ul>
    </div>
    <div class="splide__controls">
      <button class="splide__toggle" type="button">
        <Icon
          class="splide__toggle__play"
          name="mdi:play-circle"
          width={24}
          height={24}
        />
        <Icon
          class="splide__toggle__pause"
          name="mdi:pause-circle"
          width={24}
          height={24}
        />
      </button>
    </div>
  </section>
</Container>
  <!-- <script define:vars={{carouselTranslations}}> -->
<script>
import { Splide } from "@splidejs/splide";
import { Intersection } from "@splidejs/splide-extension-intersection";

new Splide(".splide", {
    type: "slide",
    rewind: true,
  //  i18n: carouselTranslations,
  // i18n: {
  //   ...carouselTranslations,
  // },
  // i18n: translations,
  // i18n: { ...window.carouselTranslations},
    // heightRatio: 0.3,
    heightRatio:.4,
    // heightRatio: 0.6,
    autoplay: "pause",
    intersection: {
      inView: {
        autoplay: true,
      },
      outView: {
        autoplay: false,
      },
    },
    interval: 6000,
  }).mount({ Intersection });
</script>
<style is:global>
  .splide__controls button {
    border: 0;
    position: absolute;
    left: 50%;
    bottom: 6%;
    background: none;
    transform: translateX(-50%) scale(2);
  }
  [astro-icon="mdi:play-circle"],
  [astro-icon="mdi:pause-circle"] {
    fill: #ccc;
    color: #ccc;
  }
  .splide__slide {
    width: 100%;
    text-align: center;
  }
  .splide__slide img {
    border-radius: var(--theme-shape-radius);
    width: auto;
    height: 100%;
    object-fit: contain;
  }

  .splide__arrow--prev, .splide__arrow--next {
    font-size: 24px;
    position: absolute;
    border: 0;
    border-radius: 50%;
    background-color: #ccc;
    top:50%;
    z-index: 9;
} 
.splide__arrow--prev svg, .splide__arrow--next svg {
   height: 40px;
   width: 40px;
   vertical-align: middle;
}
.splide__arrow--next {
  right: 0;
}

.splide__arrow--prev {
  left: 0;
  transform: scaleX(-1);
}
  .splide__pagination {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
  }
  .splide__pagination button {
    background-color: #ccc;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s;
    opacity: .5;
  }
  .splide__pagination button.is-active {
    opacity: 1;
  }
</style>

[adopted3]

I'm having trouble with this also. See issue #1297, closed without followup.

[pascal-brand38]

I've just published on npm astro-splide, to ease @splidejs/splide integration in astro

npm install astro-splide @splidejs/splide

You may have a look at the Readme and Demo

Just let me know if you see any issue / any improvement, and fill an issue if required.