Skip to content

Not working #12

@VigilioYonatan

Description

@VigilioYonatan

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>
    );
};

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions