Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added splide js #233

Merged
merged 9 commits into from
Oct 12, 2024
Merged

Added splide js #233

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
48b6b0e
added splide
Shirisha-16 Oct 11, 2024
13d5c6d
added splide with some more images
Shirisha-16 Oct 11, 2024
6808f0d
Merge pull request #1 from Shirisha-16/feature
Shirisha-16 Oct 11, 2024
7b2cfaa
Merge branch 'main' into main
RamakrushnaBiswal Oct 12, 2024
62a57b1
Update Boardgame.jsx
RamakrushnaBiswal Oct 12, 2024
4139848
added login in signup page
Shirisha-16 Oct 12, 2024
40ef958
Merge branch 'main' of https://github.com/Shirisha-16/PlayCafe
Shirisha-16 Oct 12, 2024
40b2884
Merge branch 'RamakrushnaBiswal:main' into main
Shirisha-16 Oct 12, 2024
c001666
changed the height of images and added login link in signup page
Shirisha-16 Oct 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
57 changes: 48 additions & 9 deletions frontend/src/components/Pages/Boardgame.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import React, { useState ,useEffect} from 'react';
import React, { useState } from 'react';
import { Splide, SplideSlide } from '@splidejs/react-splide';
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';
Expand Down Expand Up @@ -202,6 +205,7 @@ export default function Boardgame() {
},
];


useEffect(() => {
window.scrollTo(0, 0);
}, []);
Comment on lines +209 to 211
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Remove unused useEffect hook

The useEffect hook is no longer being used in this component. It's best to remove unused code to keep the component clean and avoid potential confusion.

Apply this diff to remove the unused useEffect hook:

-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, []);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
useEffect(() => {
window.scrollTo(0, 0);

Expand All @@ -223,15 +227,50 @@ export default function Boardgame() {
</p>
</div>
</div>
<LazyLoadImage
alt={'bg'}
effect="blur"
wrapperProps={{
style: { transitionDelay: '1s' },
<Splide
options={{
type: 'loop',
perPage: 1,
autoplay: true,
interval: 3000,
lazyLoad: 'sequential',
}}
className="mx-auto w-full aspect-[3/1] overflow-hidden rounded-t-xl object-cover object-center shadow-2xl"
src={bg}
/>
className="mx-auto w-full rounded-t-xl object-cover object-center shadow-2xl"
>
<SplideSlide>
<LazyLoadImage
alt="bg"
effect="blur"
src="https://images.unsplash.com/photo-1656686631034-e88d4fbde1e3?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
className="w-full h-full object-cover"
/>
</SplideSlide>
<SplideSlide>
<LazyLoadImage
alt="bg1"
effect="blur"
src="https://images.unsplash.com/photo-1681402720847-961bb1aab8d8?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
className="w-full object-cover"
/>
</SplideSlide>
<SplideSlide>
<LazyLoadImage
alt="bg2"
effect="blur"
src="https://images.unsplash.com/photo-1609818698346-8cb3be6e0bc0?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
className="w-full object-cover"
/>
</SplideSlide>
<SplideSlide>
<LazyLoadImage
alt="bg3"
effect="blur"
src="https://images.unsplash.com/photo-1659480142923-0cd01191e0e9?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
className="w-full h-full object-cover"
/>
</SplideSlide>
{/* Add more slides as necessary */}
</Splide>
</div>
</section>
<section className="w-full py-12 md:py-24 lg:py-32">
Expand Down
Loading