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 top-0 left-0 w-full h-full object-cover rounded-full`}
/>
</div>
</div>
</div>
</li>
))}
</div>
</div>
I am trying to make avatars to scrolls. I have 20 avatars and make it infinite auto scroll on the website. However, it has 3 rows not 1 row, I dunno where the dot came from (little dot from each circle avatar) and the three rows of avatar are autoscrolling all together.
How can I make all the avatar to the single line and infinite – auto scroll?
The avatars are in 3 rows because the div that has the embla__container class is also set to flex-wrap, meaning that the flex items inside it (the avatars) are allowed to wrap into multiple lines. If you remove the class, they will all be on one line next to each other. You can read more about the usage of flex-wrap here: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
<div className="embla__container flex justify-between w-full">
The dot came from the li element as the dot is it’s default marker. You have multiple ways to remove the dot:
First method: you could change the li element to an other element, in this case probably to a div or a button.
Second method: If you really want to use the li element, you could change the default marker from the dot to an other marker. With tailwind, this works by adding the list-none class to the element.
<li className="list-none"></li>
You can read about the functionalities of the marker here: https://developer.mozilla.org/en-US/docs/Web/CSS/::marker
Feel free to ask if you need some more help.