Replaced the project slider

client/package.json

@@ -17,7 +17,6 @@
         "@types/react-router-dom": "^5.1.7",
         "emoji-picker-react": "^3.4.4",
         "react": "^17.0.2",
-        "react-alice-carousel": "^2.5.1",
         "react-dom": "^17.0.2",
         "react-router-dom": "^5.2.0",
         "react-scripts": "4.0.3",

client/src/components/layout/ProjectsSlider/index.tsx

 
-import Carousel from 'react-alice-carousel';
+import { useCallback, useRef } from 'react';
 
 import ProjectSlide, { ProjectSlideProps } from 'components/ui/ProjectSlide';
 
 import './projects-slider.scss';
-import 'react-alice-carousel/lib/alice-carousel.css';
-
-const responsive = {
-    0: { items: 1 },
-    560: { items: 2 },
-    1200: { items: 3 },
-};
 
 interface Props {
     projects: ProjectSlideProps[]
 }
 
 export default function ProjectsSlider({ projects }: Props) {
+    const slider = useRef<HTMLDivElement | null>(null);
+
+    const onChange = useCallback(amount => {
+        const current = parseFloat(slider.current?.style.getPropertyValue('--position') ?? '0') || 0;
+        const next = Math.min(Math.max(current + amount, 0), projects.length - 1);
+        slider.current?.style.setProperty('--position', next.toString());
+    }, [slider, projects]);
+
     return (
-        <>
-            {
-                projects.length ?
-                    <div className="project-slider">
-                        <Carousel
-                            mouseTracking
-                            responsive={responsive}
-                            disableDotsControls
-                            disableButtonsControls
-                            touchTracking
-                        >
-                            {
-                                projects.map(project => <ProjectSlide key={project.project.id} {...project} />)
-                            }
-                        </Carousel>
-                    </div> :
-                    <div>No Projects found.</div>
-            }
-        </>
+        projects.length
+            ? (
+                <div className="project-slider" ref={slider}>
+                    <div className="prev-button" onClick={() => onChange(-1)}>
+                        &lt;
+                    </div>
+                    <div className = "next-button" onClick={() => onChange(1)}>
+                        &gt;
+                    </div>
+                    {
+                        projects.map(project =>
+                            <div
+                                key={project.project.id}
+                                className="slide"
+                            >
+                                <ProjectSlide {...project} />
+                            </div>
+                        )
+                    }
+                </div>
+            )
+            : <div>No Projects found.</div>
     );
 }
 

client/src/components/layout/ProjectsSlider/projects-slider.scss

@@ -4,22 +4,50 @@
 
 .project-slider {
     overflow: hidden;
-    padding: 200px;
-    margin: -210px;
-    margin-right: -50px;
-    padding-right: 50px;
+    white-space: nowrap;
+    padding: 30px 30px;
+    margin: -30px -30px;
+    position: relative;
 
-    .alice-carousel__wrapper {
-        overflow: visible;
+    .prev-button, .next-button {
+        display: flex;
+        user-select: none;
+        font-size: 2rem;
+        cursor: pointer;
+        position: absolute;
+        opacity: 0.75;
+        background-color: s.$light;
+        z-index: 100;
+        width: 50px;
+        height: 100px;
+        border-radius: 25px;
+        top: 50%;
+        transform: translateY(-50%);
+        justify-content: center;
+        align-items: center;;
     }
 
-    .project-slide {
-        user-select: none;
-        -moz-user-select: none;
-        -webkit-user-drag: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-        margin: 10px;
+    .prev-button {
+        left: 10px;
+    }
+
+    .next-button {
+        right: 10px;
+    }
+
+    .slide {
+        display: inline-block;
+        margin: 12px;
+        width: calc(100% - 24px);
+        transform: translateX(calc(var(--position) * (-100% - 24px)));
+
+        @include mx.breakpoint(medium) {
+            width: calc(50% - 24px);
+        }
+
+        @include mx.breakpoint(xlarge) {
+            width: calc(33.3% - 24px);
+        }
     }
 }
 

client/yarn.lock

@@ -9080,13 +9080,6 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-react-alice-carousel@^2.5.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/react-alice-carousel/-/react-alice-carousel-2.5.1.tgz#d8b27f942d342bf57367eb2c3301358a28758381"
-  integrity sha512-UeAd+O83TEiCxbDMMd9xAOLRr+xPNFPai9W6cNQgmIfEBgOiKDdntpTnhhwfXKoirXxQcbPlg9eG7FG9D1M4SA==
-  dependencies:
-    vanilla-swipe "^2.2.0"
-
 react-app-polyfill@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-2.0.0.tgz#a0bea50f078b8a082970a9d853dc34b6dcc6a3cf"
@@ -11123,11 +11116,6 @@ value-equal@^1.0.1:
   resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
   integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
 
-vanilla-swipe@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/vanilla-swipe/-/vanilla-swipe-2.3.0.tgz#a2cd466aabed00c1e8abd7b69a86940bf9319516"
-  integrity sha512-4m8vZ/kckRG7RQUYNg+0lGILMHT08KEgwePlRLzediDSu7aQFBLB0V2n36vUmYqq5CVWASOzZ8zpnQFZXIbHbA==
-
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"