Merge pull request #13 from Quolls/feat/multi-imgs-2

feat(Image&Location): swiper, auto update location

frontend/package.json

@@ -18,14 +18,17 @@
     "@radix-ui/react-toast": "^1.1.5",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.35.7",
+    "@types/swiper": "^6.0.0",
     "appwrite": "^13.0.0",
     "attr-accept": "^2.2.2",
+    "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "date-fns": "^3.6.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-tailwindcss": "^3.13.0",
+    "gsap": "^3.12.5",
     "lucide-react": "^0.105.0-alpha.4",
     "next-auth": "^4.24.7",
     "prettier": "^3.0.3",
@@ -39,13 +42,15 @@
     "react-slick": "^0.30.2",
     "slick-carousel": "^1.8.1",
     "solidjs-dropzone": "^1.0.0",
+    "styled-components": "^6.1.8",
+    "swiper": "^11.1.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/node": "^20.8.0",
-    "@types/react": "^18.2.15",
+    "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.7",
     "@types/react-slick": "^0.23.13",
     "@typescript-eslint/eslint-plugin": "^6.0.0",

frontend/src/components/StorySwiper/StorySwiper.css

@@ -0,0 +1,38 @@
+/* .swiper {
+  width: 30%;
+  height: 30%;
+} */
+
+.swiper-slide {
+  text-align: center;
+  font-size: 18px;
+  background: #fff;
+
+  /* Center slide text vertically */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.swiper-slide img {
+  display: block;
+  object-fit: cover;
+}
+
+.mySwiper {
+  width: 500px !important; /* 或者任何具体的宽度值 */
+  height: 500px !important; /* 根据你的需求调整高度 */
+}
+
+.mySwiper img {
+  width: 100%; /* 图片宽度占满容器 */
+  height: 100%; /* 图片高度占满容器 */
+  object-fit: cover; /* 保持宽高比，可能会裁剪图片 */
+}
+
+@media (max-width: 600px) {
+  .mySwiper {
+    width: 350px !important;
+    height: 200px !important; /* 在小屏幕上减小高度 */
+  }
+}