✨ Add React Carousel

Author: Frontendland

public/img/placeholder1.png

@@ -19,6 +19,7 @@ const {
     progress,
     pagination,
     effect,
+    debounce = 20,
     className,
     wrapperClassName,
     paginationClassName
@@ -58,7 +59,11 @@ const style = visibleItems > 1
 ---
 
 <section class:list={classes}>
-    <div class:list={containerClasses} data-id="w-carousel">
+    <div
+        class:list={containerClasses}
+        data-id="w-carousel"
+        data-debounce={debounce !== 20 && debounce}
+    >
         <ul
             class:list={wrapperClasses}
             style={style}
@@ -98,7 +103,7 @@ const style = visibleItems > 1
 
     const carousels = Array.from(document.querySelectorAll('[data-id="w-carousel"]'))
 
-    const scroll = debounce((event: Event) => {
+    const scroll = (event: Event) => {
         const target = event.target as HTMLDivElement
 
         if (!target.dataset.paginated) {
@@ -133,10 +138,17 @@ const style = visibleItems > 1
         } else {
             target.removeAttribute('data-paginated')
         }
-    }, 20)
+    }
 
     carousels.forEach(carousel => {
-        carousel.addEventListener('scroll', scroll)
+        const carouselElement = carousel as HTMLDivElement
+        const debounceAmount = carouselElement.dataset.debounce
+            ? Number(carouselElement.dataset.debounce)
+            : 20
+
+        carousel.addEventListener('scroll', debounce((event: Event) => {
+            scroll(event)
+        }, debounceAmount))
     })
 
     listen('paginate', event => {

public/img/placeholder2.png

@@ -7,7 +7,7 @@
     import Progress from '../Progress/Progress.svelte'
 
     import { classNames } from '../../utils/classNames'
-    import { debounce } from '../../utils/debounce'
+    import { debounce as debounceScroll } from '../../utils/debounce'
 
     import styles from './carousel.module.scss'
 
@@ -20,9 +20,11 @@
     export let progress: SvelteCarouselProps['progress'] = false
     export let pagination: SvelteCarouselProps['pagination'] = {}
     export let effect: SvelteCarouselProps['effect'] = null
+    export let debounce: SvelteCarouselProps['debounce'] = 20
     export let className: SvelteCarouselProps['className'] = ''
     export let wrapperClassName: SvelteCarouselProps['wrapperClassName'] = ''
     export let paginationClassName: SvelteCarouselProps['paginationClassName'] = ''
+    export let onScroll: SvelteCarouselProps['onScroll'] = () => {}
 
     let carouselContainer: HTMLDivElement
     let carousel: HTMLUListElement
@@ -80,9 +82,11 @@
 
             progressValue = percentage * (currentPage - 1)
         }
+
+        onScroll?.(currentPage)
     }
 
-    const scroll = debounce((event: Event) => {
+    const scroll = debounceScroll((event: Event) => {
         if (paginated) {
             paginated = false
         } else {
@@ -95,7 +99,7 @@
 
             updateValues()
         }
-    }, 20)
+    }, debounce)
 
     const paginate = (event: PaginationEventType) => {
         const liElement = carouselItems[event.page - 1] as HTMLLIElement
@@ -134,10 +138,7 @@
         class={paginationWrapperClasses}
     >
         {#if progress}
-            <Progress
-                className="w-carousel-progress"
-                value={progressValue}
-            />
+            <Progress value={progressValue} />
         {/if}
         <Pagination
             type="arrows"

public/img/placeholder3.png

@@ -0,0 +1,171 @@
+import React, { useEffect, useRef, useState } from 'react'
+import type { ReactCarouselProps } from './carousel'
+
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+import Pagination from '../Pagination/Pagination.tsx'
+import Progress from '../Progress/Progress.tsx'
+
+import { classNames } from '../../utils/classNames'
+import { debounce as debounceScroll } from '../../utils/debounce'
+
+import styles from './carousel.module.scss'
+
+import type { PaginationEventType } from '../Pagination/pagination'
+
+const Carousel = ({
+    items,
+    visibleItems = 1,
+    subText,
+    scrollSnap = true,
+    progress,
+    pagination,
+    effect,
+    debounce = 20,
+    className,
+    wrapperClassName,
+    paginationClassName,
+    onScroll,
+    children
+}: ReactCarouselProps) => {
+    const carouselContainer = useRef<HTMLDivElement>(null)
+    const carousel = useRef<HTMLUListElement>(null)
+    const carouselItems = useRef<any>(null)
+    const paginated = useRef(false)
+    const currentPage = useRef(1)
+
+    const [progressValue, setProgressValue] = useState(0)
+    const [updatedSubText, setUpdatedSubText] = useState(subText)
+
+    const classes = classNames([
+        styles.carousel,
+        className
+    ])
+
+    const containerClasses = classNames([
+        styles.container,
+        scrollSnap && styles.snap
+    ])
+
+    const wrapperClasses = classNames([
+        styles.wrapper,
+        effect && styles[effect],
+        wrapperClassName
+    ])
+
+    const paginationWrapperClasses = classNames([
+        styles['pagination-wrapper'],
+        paginationClassName
+    ])
+
+    const paginationClasses = classNames([
+        styles.pagination,
+        !subText && paginationClassName
+    ])
+
+    const totalPages = Math.ceil(items / visibleItems!)
+    const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
+    const style = visibleItems > 1
+        ? { '--w-slide-width': `${100 / visibleItems}%;` } as React.CSSProperties
+        : undefined
+
+    const updateValues = (page: number) => {
+        const activeElement = carouselItems.current[page - 1]
+
+        Array.from(carouselItems.current).forEach(li => (li as HTMLLIElement).removeAttribute('data-active'))
+        activeElement.dataset.active = 'true'
+
+        if (subTextValue) {
+            setUpdatedSubText(
+                subTextValue
+                    .replace('{0}', String(page))
+                    .replace('{1}', String(totalPages))
+            )
+        }
+
+        if (progress) {
+            const percentage = (100 / (totalPages - 1))
+
+            setProgressValue(percentage * (page - 1))
+        }
+
+        onScroll?.(page)
+    }
+
+    const scroll = debounceScroll((event: Event) => {
+        if (paginated.current) {
+            paginated.current = false
+        } else {
+            const target = event.target as HTMLDivElement
+            const scrollLeft = target.scrollLeft
+            const itemWidth = target.children[0].clientWidth
+            const page = Math.round(scrollLeft / itemWidth) + 1
+
+            currentPage.current = page
+
+            updateValues(page)
+        }
+    }, debounce)
+
+    const paginate = (event: PaginationEventType) => {
+        const liElement = carouselItems.current[event.page - 1]
+
+        liElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+
+        currentPage.current = event.page
+        paginated.current = true
+
+        updateValues(event.page)
+    }
+
+    useEffect(() => {
+        const usedInAstro = carousel.current?.children[0].nodeName === 'ASTRO-SLOT'
+
+        carouselItems.current = usedInAstro
+            ? carousel.current.querySelectorAll('li')
+            : carousel.current?.children
+
+        carouselContainer.current?.addEventListener('scroll', scroll)
+
+        return () => {
+            carouselContainer.current?.removeEventListener('scroll', scroll)
+        }
+    }, [])
+
+    return (
+        <section className={classes}>
+            <div className={containerClasses} ref={carouselContainer}>
+                <ul className={wrapperClasses} style={style} ref={carousel}>
+                    {children}
+                </ul>
+            </div>
+            <ConditionalWrapper
+                condition={!!(subText || progress)}
+                wrapper={children => (
+                    <div className={paginationWrapperClasses}>{children}</div>
+                )}
+            >
+                {progress && (
+                    <Progress value={progressValue} />
+                )}
+                <Pagination
+                    type="arrows"
+                    {...pagination}
+                    currentPage={currentPage.current}
+                    totalPages={totalPages}
+                    className={paginationClasses}
+                    onChange={paginate}
+                />
+                {updatedSubText && (
+                    <span className={styles.subtext}>
+                        {updatedSubText
+                            .replace('{0}', '1')
+                            .replace('{1}', String(totalPages))
+                        }
+                    </span>
+                )}
+            </ConditionalWrapper>
+        </section>
+    )
+}
+
+export default Carousel

src/components/Carousel/Carousel.astro

@@ -1,11 +1,5 @@
 import type { PaginationProps } from '../Pagination/pagination'
 
-export type CarouselEventType = {
-    from: string
-    to: string
-    current: string
-}
-
 export type CarouselProps = {
     items: number
     visibleItems?: number
@@ -16,16 +10,17 @@ export type CarouselProps = {
     progress?: boolean
     pagination?: PaginationProps
     effect?: 'opacity' | 'saturate' | null
+    debounce?: number
     className?: string
     wrapperClassName?: string
     paginationClassName?: string
 }
 
 export type SvelteCarouselProps = {
-    onScroll?: (event: CarouselEventType) => void
+    onScroll?: (event: number) => void
 } & CarouselProps
 
 export type ReactCarouselProps = {
-    onScroll?: (event: CarouselEventType) => void
+    onScroll?: (event: number) => void
     children?: React.ReactNode
 } & CarouselProps