Svelte（Astro Island）でSwiperを使う
YamanakaSwiperの公式ドキュメントみると、WebComponents版を使う方法があった。
Yamanakav11になってたので更新の確認。「Back To Basics」ね。なるほど。
Yamanakaloopが改善された。
For example, if we have slidesPerView: 3, in v10 we needed at least 6 slides for loop mode. In v11, we now need only 4 slides for that.
loopで必要なスライド枚数が減ったとのこと。
あとは、イベント名の変更とか、overflowの方法変更とか。
Yamanaka実装はじめる。
まずは公式ドキュメントのコードをそのまま試したが動かず…
propsからbreakpointsを消したら動いた。
swiper-containerに横幅の指定も追加。
<script>
import { register } from 'swiper/element/bundle';
register();
const spaceBetween = 10;
const onProgress = (e) => {
const [swiper, progress] = e.detail;
console.log(progress);
};
const onSlideChange = (e) => {
console.log('slide changed');
};
</script>
<swiper-container
slides-per-view={3}
space-between={spaceBetween}
centered-slides={true}
pagination={{
hideOnClick: true,
}}
on:swiperprogress={onProgress}
on:swiperslidechange={onSlideChange}
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
</swiper-container>
<style>
swiper-container {
width: 100%;
}
</style>
エラーはastro-islandのもの（astroからsvelte使うところで何か問題があるのかな？）
[astro-island] Error hydrating /src/components/CarouselSwiper/CarouselSwiper.svelte TypeError: Cannot destructure property 'params' of 'swiper' as it is undefined.
breakpointsが使えないと困る。
Next.jsで似たような事例を発見。
コメントを参考に JSON.stringify を付けたら動いた。
納得いかないが、一旦コレで進める。
breakpoints={JSON.stringify({
640: {
slidesPerView: 1,
},
768: {
slidesPerView: 3,
},
})}
また問題（よく問題が起こるなー）
loopとcenteredSlidesを同時に使うとエラーで止まる。
loop={true}
centered-slides={true}
エラーはまたもやastro-island。
[astro-island] Error hydrating /src/components/CarouselSwiper/CarouselSwiper.svelte TypeError: Cannot convert undefined or null to object
undefined?null?
もしやと思って、onMount後に値を変更したらエラーは止まった。
<script>
...
let loop = false;
let centerdSlides = false;
onMount(() => {
loop = true;
centerdSlides = true;
});
</script>
<swiper-container
{loop}
centered-slides={centerdSlides}
...
>
...
</swiper-container>
しかし、アイテムが表示されないし、paginationの挙動がおかしい。
YamanakaCoreバージョンで動かせるとのことなので試してみたら、アイテムちゃんと表示される！
loopとcenteredSlides同時に使えた。
最小構成で試したので、もろもろの機能の確認をする。
YamanakaPaginationもNavigationもこちらの方法で追加できた。
<swiper-container init="false" Pagination={true} navigation={true} id="js-swiper-core">
CoreバージョンだとModulesで追加してるが、そっちの方法はうまくいかず。
Yamanakaこれで完了。
【おまけ】
ShadowDOMにスタイルを追加する場所を用意しておくの参考になる。