diff --git a/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx b/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx
index 82dd8492..645abcb9 100644
--- a/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx
+++ b/src/components/_shared/SolidSwiper/ArticleCardSwiper.tsx
@@ -1,6 +1,6 @@
-import { For, Show } from 'solid-js'
+import { For, onMount, Show } from 'solid-js'
 import { Icon } from '../Icon'
-import { register } from 'swiper/element'
+import { register } from 'swiper/element/bundle'
 import SwiperCore, { Manipulation, Navigation, Pagination } from 'swiper'
 import { SwiperRef } from './swiper'
 import { clsx } from 'clsx'
@@ -13,13 +13,12 @@ type Props = {
   title?: string
 }
 
-register()
-
-SwiperCore.use([Pagination, Navigation, Manipulation])
-
 export const ArticleCardSwiper = (props: Props) => {
   const mainSwipeRef: { current: SwiperRef } = { current: null }
-
+  onMount(() => {
+    register()
+    SwiperCore.use([Pagination, Navigation, Manipulation])
+  })
   return (
     <div class={clsx(styles.Swiper, styles.articleMode, styles.ArticleCardSwiper)}>
       <Show when={props.title}>
diff --git a/src/components/_shared/SolidSwiper/ImageSwiper.tsx b/src/components/_shared/SolidSwiper/ImageSwiper.tsx
index 8d51db03..23a9f623 100644
--- a/src/components/_shared/SolidSwiper/ImageSwiper.tsx
+++ b/src/components/_shared/SolidSwiper/ImageSwiper.tsx
@@ -1,9 +1,9 @@
-import { createEffect, createSignal, For, Show, on } from 'solid-js'
+import { createEffect, createSignal, For, Show, on, onMount } from 'solid-js'
 import { MediaItem, UploadedFile } from '../../../pages/types'
 import { Icon } from '../Icon'
 import { Popover } from '../Popover'
 import { useLocalize } from '../../../context/localize'
-import { register } from 'swiper/element'
+import { register } from 'swiper/element/bundle'
 import { DropArea } from '../DropArea'
 import { createFileUploader } from '@solid-primitives/upload'
 import SwiperCore, { Manipulation, Navigation, Pagination } from 'swiper'
@@ -28,10 +28,6 @@ type Props = {
   onImageChange?: (index: number, value: MediaItem) => void
 }
 
-register()
-
-SwiperCore.use([Pagination, Navigation, Manipulation])
-
 export const ImageSwiper = (props: Props) => {
   const { t } = useLocalize()
   const [loading, setLoading] = createSignal(false)
@@ -139,6 +135,11 @@ export const ImageSwiper = (props: Props) => {
     handleSlideDescriptionChange(slideIndex(), 'body', slideBody())
   }
 
+  onMount(() => {
+    register()
+    SwiperCore.use([Pagination, Navigation, Manipulation])
+  })
+
   return (
     <div class={clsx(styles.Swiper, props.editorMode ? styles.editorMode : styles.articleMode)}>
       <div class={styles.container}>