diff --git a/.gitignore b/.gitignore index dfcf9fd0..c6e8c984 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ # Directories node_modules/ +.history/ .vscode/ build/ .idea/ diff --git a/src/components/helpers/carousel/Carousel.jsx b/src/components/helpers/carousel/Carousel.jsx index 7582f81f..1c223202 100644 --- a/src/components/helpers/carousel/Carousel.jsx +++ b/src/components/helpers/carousel/Carousel.jsx @@ -1,39 +1,47 @@ import React, { useState, useEffect, useCallback, useRef } from 'react'; -import { PrevButton, NextButton } from './CarouselButtons'; +import { MdOutlineArrowForwardIos, MdOutlineArrowBackIos } from 'react-icons/md'; import useEmblaCarousel from 'embla-carousel-react'; import Autoplay from 'embla-carousel-autoplay'; -import './carousel.scss'; -import { FaPhotoVideo } from 'react-icons/fa'; -const EmblaCarousel = ({ data, options = { loop: false } }) => { +import './carousel.scss'; + +export default function EmblaCarousel({ data }) { const autoplay = useRef( Autoplay({ delay: 3000, stopOnInteraction: false }, (emblaRoot) => emblaRoot.parentElement), ); - const [emblaRef, emblaApi] = useEmblaCarousel(options, [autoplay.current]); + const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false }, [autoplay.current]); const [prevBtnEnabled, setPrevBtnEnabled] = useState(false); const [nextBtnEnabled, setNextBtnEnabled] = useState(false); - const scrollNext = useCallback(() => { - if (!emblaApi) return; - emblaApi.scrollNext(); - autoplay.current.reset(); - }, [emblaApi]); + const scroll = useCallback( + (direction) => { + if (!emblaApi) { + return; + } - const scrollPrev = useCallback(() => { - if (!emblaApi) return; - emblaApi.scrollPrev(); - autoplay.current.reset(); - }, [emblaApi]); + if (direction === 'next') { + emblaApi.scrollNext(); + } else { + emblaApi.scrollPrev(); + } + autoplay.current.reset(); + }, + [emblaApi], + ); const onSelect = useCallback(() => { - if (!emblaApi) return; + if (!emblaApi) { + return; + } setPrevBtnEnabled(emblaApi.canScrollPrev()); setNextBtnEnabled(emblaApi.canScrollNext()); }, [emblaApi]); useEffect(() => { - if (!emblaApi) return; + if (!emblaApi) { + return; + } onSelect(); emblaApi.on('select', onSelect); }, [emblaApi, onSelect]); @@ -45,16 +53,32 @@ const EmblaCarousel = ({ data, options = { loop: false } }) => { {data.map((photo, index) => (