diff --git a/frontend/package.json b/frontend/package.json index 8f7a92f8..fc13f2f4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,6 +13,7 @@ }, "dependencies": { "@kinde-oss/kinde-auth-react": "^4.0.4", + "@splidejs/react-splide": "^0.7.12", "@splidejs/splide": "^4.1.4", "@splidejs/splide-extension-auto-scroll": "^0.5.3", "antd": "^5.21.2", diff --git a/frontend/src/components/Pages/Boardgame.jsx b/frontend/src/components/Pages/Boardgame.jsx index 001bb69a..e01cd905 100644 --- a/frontend/src/components/Pages/Boardgame.jsx +++ b/frontend/src/components/Pages/Boardgame.jsx @@ -1,4 +1,8 @@ -import React, { useState ,useEffect} from 'react'; +import React, { useState,useEffect } from 'react'; +import { Splide, SplideSlide } from '@splidejs/react-splide'; +import { AutoScroll } from '@splidejs/splide-extension-auto-scroll'; +import '@splidejs/react-splide/css'; + import board1 from '../../assets/Boardgames/board1.png'; import board2 from '../../assets/Boardgames/board2.png'; import board3 from '../../assets/Boardgames/board3.jpg'; @@ -202,6 +206,7 @@ export default function Boardgame() { }, ]; + useEffect(() => { window.scrollTo(0, 0); }, []); @@ -223,15 +228,57 @@ export default function Boardgame() {
-