-
Notifications
You must be signed in to change notification settings - Fork 8
Open
Description
Not working, it working when you use the pages[0] but no change
export const Carousel = <T extends any>({
items,
renderItem,
}: CarouselProps<T>) => {
const {
scrollRef,
pages,
activePageIndex,
prev,
next,
goTo,
snapPointIndexes,
} = useSnapCarousel();
console.log(pages); // is array inside array
return (
<div style={styles.root} class="text-white">
<ul style={styles.scroll} ref={scrollRef}>
{items.map((item, i) => {
return renderItem({
item,
isSnapPoint: snapPointIndexes.has(i),
});
})}
</ul>
<div style={styles.controls} aria-hidden>
<button
type="button"
style={{
...styles.nextPrevButton,
...(activePageIndex === 0
? styles.nextPrevButtonDisabled
: {}),
}}
onClick={() => prev()}
>
{String.fromCharCode(8592)}
</button>
{pages[0].map((_, i) => (
<button
type="button"
key={i}
style={{
...styles.paginationButton,
...(activePageIndex === i
? styles.paginationButtonActive
: {}),
}}
onClick={() => goTo(i)}
>
{i + 1}
</button>
))}
<button
type="button"
style={{
...styles.nextPrevButton,
...(activePageIndex === pages[0].length - 1
? styles.nextPrevButtonDisabled
: {}),
}}
onClick={() => next()}
>
{String.fromCharCode(8594)}
</button>
</div>
<div style={styles.pageIndicator}>
{activePageIndex + 1} / {pages[0].length}
</div>
</div>
);
};Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels