const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [ AutoScroll({ playOnInit: true }), ]); <div className=”embla__viewport” ref={emblaRef}> <div className=”embla__container flex flex-wrap justify-between w-full”> {artists.map((artist, i) => ( <li key={i} onClick={async () => { // onclick for avatar }} > <div className=”embla__slide” key={i}> <div className=”p-2 cursor-pointer”> <div className=”w-[100px] h-[100px] rounded-full bg-orange-50 relative”> <img src={‘avatar_link’} alt=”” className={`absolute […]

const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [ AutoScroll({ playOnInit: true }), ]); <div className=”embla__viewport” ref={emblaRef}> <div className=”embla__container flex flex-wrap justify-between w-full”> {artists.map((artist, i) => ( <li key={i} onClick={async () => { // onclick for avatar }} > <div className=”embla__slide” key={i}> <div className=”p-2 cursor-pointer”> <div className=”w-[100px] h-[100px] rounded-full bg-orange-50 relative”> <img src={‘avatar_link’} alt=”” className={`absolute […]

const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [ AutoScroll({ playOnInit: true }), ]); <div className=”embla__viewport” ref={emblaRef}> <div className=”embla__container flex flex-wrap justify-between w-full”> {artists.map((artist, i) => ( <li key={i} onClick={async () => { // onclick for avatar }} > <div className=”embla__slide” key={i}> <div className=”p-2 cursor-pointer”> <div className=”w-[100px] h-[100px] rounded-full bg-orange-50 relative”> <img src={‘avatar_link’} alt=”” className={`absolute […]

I’m building a React component using @brainhubeu/react-carousel to display a list of services. I’ve successfully implemented the carousel with features like autoplay, infinite loop, and arrows. However, I’m facing an issue with the arrow positioning and performance.
I want the carousel arrows to be positioned on top of the carousel items, rather than on the sides. While I’ve achieved this using custom arrow components and functions, I’ve noticed a slight lag when scrolling between items. This lag is noticeable as a sort of “winking” effect.

trying to mimic a carousel project found on github, but instead of using hardcoded images, i’d like to use dynamic images whose sources are stored in mongodb. so far, i can display exclusively the first image. the second and third images are not visible because the carousel is not functioning in three ways — the touch swipe is unresponsive, the navigation dots are unresponsive, and the sliding buttons are unresponsive. nevertheless console.log shows the second and third image elements are being built just like the first image. curious as to what the problem could be.