Stop trying to reinvent the wheel

.gitignore

@@ -2,3 +2,4 @@ node_modules
 dist
 .DS_Store
 .env
+yarn-error.log

package.json

@@ -30,7 +30,8 @@
     "solid-icons": "^1.0.4",
     "solid-js": "^1.6.10",
     "solid-markdown": "^1.2.1",
-    "solid-transition-group": "^0.2.2"
+    "solid-transition-group": "^0.2.2",
+    "swiper": "^8.3.0"
   },
   "overrides": {
     "solid-js": "^1.6.10",

src/Components/Carousel.tsx

@@ -1,43 +1,49 @@
-import { Box, Flex, HStack, Text, useColorModeValue, VStack } from '@hope-ui/solid'
+import { Box, Flex, HStack, Text, useColorModeValue } from '@hope-ui/solid'
 import { useNavigate } from '@solidjs/router'
 import isEmpty from 'lodash/isEmpty'
 import { FiExternalLink } from 'solid-icons/fi'
-import { createSignal, For, Show } from 'solid-js'
+import { For, Show } from 'solid-js'
+import { Swiper, SwiperSlide } from 'swiper/solid'
+import 'swiper/swiper-bundle.css'
 import { BASE_URL_PLACEHOLDER } from '../utilities/constants'
 import Button from './Button'
-import Image from './Image'
+
 const Carousel = ({ posts }) => {
-  const [currentImage, setCurrentImage] = createSignal(0)
   const hoverColor = useColorModeValue('$whiteAlpha11', '$blackAlpha11')
   const navigate = useNavigate()
-  const nextImage = () => {
-    if (currentImage() + 1 < posts().length) {
-      return currentImage() + 1
-    }
-    return 0
-  }
-
-  const prevImage = () => {
-    if (currentImage() - 1 >= 0) {
-      return currentImage() - 1
-    }
-    return posts().length - 1
-  }
 
   return (
     <Show when={!isEmpty(posts())}>
-      <VStack spacing="$4" alignItems="center" maxW="90%">
-        <Box pos="relative" overflow="hidden" h="$sm" w="$full" minW="$sm">
-          <HStack pos="absolute" spacing="$4" h="$full" w="$full" transform={`translateX(-${currentImage() * 100}%yd)`}>
-            <For each={posts()}>
-              {({ slug, attributes: { title, image } }) => (
-                <Flex pos="relative" role="group">
-                  <Image src={image.replace(BASE_URL_PLACEHOLDER, import.meta.env.VITE_BASE_IMG_URL)} />
+      <Flex
+        w="$sm"
+        minH="$xs"
+        bg="#edf3f8"
+        _dark={{
+          bg: '#3e3e3e',
+        }}
+        p={10}
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Swiper style={{ width: '100%', flex: 1, height: '100%' }}>
+          <For each={posts()}>
+            {({ slug, attributes: { title, image } }) => (
+              <SwiperSlide>
+                <Box
+                  boxSize="full"
+                  shadow="md"
+                  w="$full"
+                  h="$full"
+                  background={`url(${image.replace(BASE_URL_PLACEHOLDER, import.meta.env.VITE_BASE_IMG_URL)})`}
+                  style={{ 'background-size': 'cover', 'background-repeat': 'no-repeat' }}
+                  role="group"
+                  alignItems="end"
+                  justifyItems="center"
+                  display="flex"
+                >
                   <HStack
-                    position="absolute"
-                    bottom={0}
-                    left={0}
-                    right={0}
+                    w="$full"
+                    position="relative"
                     p="$2"
                     transition="opacity 0.2s linear"
                     opacity={0}
@@ -52,20 +58,12 @@ const Carousel = ({ posts }) => {
                       View Post
                     </Button>
                   </HStack>
-                </Flex>
-              )}
-            </For>
-          </HStack>
-        </Box>
-        <HStack spacing="$4">
-          <Button variant="ghost" onClick={() => setCurrentImage(prevImage())}>
-            Prev
-          </Button>
-          <Button variant="ghost" onClick={() => setCurrentImage(nextImage())}>
-            Next
-          </Button>
-        </HStack>
-      </VStack>
+                </Box>
+              </SwiperSlide>
+            )}
+          </For>
+        </Swiper>
+      </Flex>
     </Show>
   )
 }

yarn.lock

@@ -728,6 +728,13 @@ dom-serializer@^1.0.1:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
+dom7@^4.0.4:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/dom7/-/dom7-4.0.6.tgz#091a51621d7a19ce0fb86045cafb3c10035e97ed"
+  integrity sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==
+  dependencies:
+    ssr-window "^4.0.0"
+
 domelementtype@^2.0.1, domelementtype@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
@@ -1554,6 +1561,11 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
+ssr-window@^4.0.0, ssr-window@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
+  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
+
 style-to-object@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.4.1.tgz#53cf856f7cf7f172d72939d9679556469ba5de37"
@@ -1568,6 +1580,14 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
+swiper@^8.3.0:
+  version "8.4.7"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-8.4.7.tgz#0301d385c3efc8efe8b66a64187edcb30e3067ee"
+  integrity sha512-VwO/KU3i9IV2Sf+W2NqyzwWob4yX9Qdedq6vBtS0rFqJ6Fa5iLUJwxQkuD4I38w0WDJwmFl8ojkdcRFPHWD+2g==
+  dependencies:
+    dom7 "^4.0.4"
+    ssr-window "^4.0.2"
+
 tabbable@^5.2.1:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.3.3.tgz#aac0ff88c73b22d6c3c5a50b1586310006b47fbf"