Update Carrousel.tsx

aelassas · Oct 8, 2024 · 1855b80 · 1855b80
1 parent 02f6f13
commit 1855b80
Show file tree

Hide file tree

Showing 5 changed files with 3 additions and 49 deletions.
diff --git a/frontend/src/app/(pages)/(public)/home/page.tsx b/frontend/src/app/(pages)/(public)/home/page.tsx
@@ -46,6 +46,7 @@ const Home = async () => {
           images={slides}
           autoplay
           autoplaySpeed={4 * 1000}
+          showNavigation
         />
       </div>
 

diff --git a/frontend/src/components/Carrousel.tsx b/frontend/src/components/Carrousel.tsx
@@ -3,9 +3,6 @@
 import React, { useRef } from 'react'
 import Slider from 'react-slick'
 import Image from 'next/image'
-import { Button } from '@mui/material'
-import { ArrowRight, ArrowLeft } from '@mui/icons-material'
-import { strings as commonStrings } from '@/lang/common'
 
 import styles from '@/styles/carrousel.module.css'
 
@@ -37,17 +34,9 @@ const Carrousel: React.FC<CarrouselProps> = ({
     appendDots: (dots: React.ReactNode) => (showNavigation || !autoplay) ? (
       <div>
         <ul style={{ margin: '0px', padding: '0px' }}>
-          <Button variant="text" className={`${styles.btnSlider} ${styles.btnSliderPrev}`} onClick={() => slider?.current?.slickPrev()}>
-            <ArrowLeft />
-            {commonStrings.BACK}
-          </Button>
           {' '}
           {dots}
           {' '}
-          <Button variant="text" className={`${styles.btnSlider} ${styles.btnSliderNext}`} onClick={() => slider?.current?.slickNext()}>
-            {commonStrings.NEXT}
-            <ArrowRight />
-          </Button>
         </ul>
       </div>
     ) : <></>,

diff --git a/frontend/src/styles/carrousel.module.css b/frontend/src/styles/carrousel.module.css
@@ -11,33 +11,13 @@ section.main h1.title {
 }
 
 section.main .slider {
-  height: 320px;
+  height: 310px;
   width: 1075px;
 }
 
-section.main .slickDots {
-  bottom: -60px;
-}
-
-section.main .slickDots li.slickActive button:before {
-  color: #1976D2;
-}
-
-section.main .btnSlider {
-  color: #000 !important;
-}
-
-section.main .btnSliderPrev {
-  margin-right: 60px;
-}
-
-section.main .btnSliderNext {
-  margin-left: 60px;
-}
-
 section.main article.image {
   height: 300px;
-  background-color: #fff;
+  background-color: #FAFAFA;
   margin: auto;
 }
 

diff --git a/frontend/src/styles/category-list.module.css b/frontend/src/styles/category-list.module.css
@@ -16,14 +16,6 @@ section.main .slider {
   height: 320px;
 }
 
-section.main .slickDots {
-  bottom: -60px;
-}
-
-section.main .slickDots li.slickActive button:before {
-  color: #1976D2;
-}
-
 section.main .btnSlider {
   color: #000 !important;
 }

diff --git a/frontend/src/styles/featured-products.module.css b/frontend/src/styles/featured-products.module.css
@@ -12,14 +12,6 @@ section.main .slider {
   height: 320px;
 }
 
-section.main .slickDots {
-  bottom: -60px;
-}
-
-section.main .slickDots li.slickActive button:before {
-  color: #1976D2;
-}
-
 section.main .btnSlider {
   color: #000 !important;
 }