diff --git a/src/components/modals/main/marketplace/imageCarousel.jsx b/src/components/modals/main/marketplace/imageCarousel.jsx
index 38ffd5cd..d0480bd1 100644
--- a/src/components/modals/main/marketplace/imageCarousel.jsx
+++ b/src/components/modals/main/marketplace/imageCarousel.jsx
@@ -1,19 +1,66 @@
-import React, { useEffect } from 'react';
-import useEmblaCarousel from 'embla-carousel-react';
-import Autoplay from 'embla-carousel-autoplay';
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { PrevButton, NextButton } from "./EmblaCarouselButtons";
+import useEmblaCarousel from "embla-carousel-react";
+import Autoplay from "embla-carousel-autoplay";
+import { FaPhotoVideo } from "react-icons/fa";
-export default function EmbaleCarousel({ data }) {
- const [emblaRef] = useEmblaCarousel({ loop: true }, [Autoplay()]);
+const EmblaCarousel = ({ data, options = { loop: false } }) => {
+ const autoplay = useRef(
+ Autoplay(
+ { delay: 3000, stopOnInteraction: false },
+ (emblaRoot) => emblaRoot.parentElement
+ )
+ );
+
+ const [emblaRef, emblaApi] = useEmblaCarousel(options, [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 scrollPrev = useCallback(() => {
+ if (!emblaApi) return;
+ emblaApi.scrollPrev();
+ autoplay.current.reset();
+ }, [emblaApi]);
+
+ const onSelect = useCallback(() => {
+ if (!emblaApi) return;
+ setPrevBtnEnabled(emblaApi.canScrollPrev());
+ setNextBtnEnabled(emblaApi.canScrollNext());
+ }, [emblaApi]);
+
+ useEffect(() => {
+ if (!emblaApi) return;
+ onSelect();
+ emblaApi.on("select", onSelect);
+ }, [emblaApi, onSelect]);
return (
-
-
- {data.map((photo, index) => (
-
-

-
- ))}
+
+
+
+ {data.map((photo, index) => (
+
+
+

+
+
+ ))}
+
+
+
);
-}
+};
+
+export default EmblaCarousel;
diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss
index 0fe7efdb..8dc46326 100644
--- a/src/components/modals/main/scss/marketplace/_main.scss
+++ b/src/components/modals/main/scss/marketplace/_main.scss
@@ -477,21 +477,91 @@ p.author {
font-size: 30px;
}
}
-
.embla {
- overflow: hidden;
+ position: relative;
+ width: 350px;
+ margin-left: 5px;
}
+
+.embla__viewport {
+ overflow: hidden;
+ width: 100%;
+}
+
+.embla__viewport.is-draggable {
+ cursor: move;
+ cursor: grab;
+}
+
+.embla__viewport.is-dragging {
+ cursor: grabbing;
+}
+
.embla__container {
display: flex;
+ user-select: none;
+ -webkit-touch-callout: none;
+ -khtml-user-select: none;
+ -webkit-tap-highlight-color: transparent;
+ margin-left: -10px;
}
+
.embla__slide {
- flex: 0 0 100%;
- height: 350px;
- width: 100px;
- img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- object-position: 80% 100%;
- }
-}
\ No newline at end of file
+ position: relative;
+ min-width: 100%;
+ padding-left: 10px;
+}
+
+.embla__slide__inner {
+ position: relative;
+ overflow: hidden;
+ height: 190px;
+}
+
+.embla__slide__img {
+ position: absolute;
+ display: block;
+ top: 50%;
+ left: 50%;
+ width: auto;
+ min-height: 100%;
+ min-width: 100%;
+ max-width: none;
+ transform: translate(-50%, -50%);
+}
+
+.embla__button {
+ outline: 0;
+ cursor: pointer;
+ background-color: transparent;
+ touch-action: manipulation;
+ position: absolute;
+ z-index: 1;
+ top: 50%;
+ transform: translateY(-50%);
+ border: 0;
+ width: 30px;
+ height: 30px;
+ justify-content: center;
+ align-items: center;
+ fill: #1bcacd;
+ padding: 0;
+}
+
+.embla__button:disabled {
+ cursor: default;
+ opacity: 0.3;
+}
+
+.embla__button__svg {
+ width: 100%;
+ height: 100%;
+}
+
+.embla__button--prev {
+ left: 27px;
+}
+
+.embla__button--next {
+ right: 27px;
+}