我无法关闭 SplideJS carrousel

Question

我在 nextJS 项目中使用 splideJS 来查看从服务器获取的图像。我想让它在我点击图像外部时轮播关闭，但我似乎无法让它工作。

import { Splide, SplideSlide } from "@splidejs/react-splide";
import "@splidejs/react-splide/css";
import styles from "./CarousselStyles.module.scss";
import { useRef, useEffect } from "react"; // Import useRef and useEffect
import OutsideClickHandler from "react-outside-click-handler";
const EventCarousel = ({ imagesUrl, isOpen, onClose }) => {
    if (!isOpen) return null;

    const mainCarouselRef = useRef(null);
    const thumbCarouselRef = useRef(null);
    let imageRef = useRef()

    const mainOptions = {
        type: 'loop',
        width: '100%',
        height: '100%',
        pagination: false,
        arrows: false,
        drag: true,
    };

    const thumbsOptions = {
        type: 'slide',
        rewind: true,
        gap: '0.2rem',
        pagination: false,
        fixedWidth: 100,
        fixedHeight: 70,
        cover: true,
        focus: 'center',
        isNavigation: true,
        arrows: true,
    };

    useEffect(() => {
        const handler = (e) => {
            if (imageRef.current && !imageRef.current.contains(e.target)) {
                onClose;
                console.log(imageRef.current)
            }
        };

        document.addEventListener("mousedown", handler);

        return () => {
            document.removeEventListener("mousedown", handler);
        };
    }, [onClose]);

    // Sync the carousels
    useEffect(() => {
        if (mainCarouselRef.current && thumbCarouselRef.current) {
            const mainCarousel = mainCarouselRef.current.splide;
            const thumbCarousel = thumbCarouselRef.current.splide;

            if (mainCarousel && thumbCarousel) {
                mainCarousel.sync(thumbCarousel);
            }
        }
    }, []);

    return (

        <div className={styles.carouselOverlay} >
            <button className={styles.closeButton} onClick={onClose}>×</button>
            <div className={styles.carouselWrapper}>
                {/* Main Carousel */}

                <Splide
                    options={mainOptions}
                    ref={mainCarouselRef}
                    id="main-carousel"
                    aria-labelledby="thumbnail-carousel"
                >
                    {imagesUrl.map((img, index) => (
                        <SplideSlide key={index}>
                            <div className={styles.slideImage} >

                                <img ref={imageRef} src={img} alt={`Slide ${index + 1}`} />
                            </div>
                        </SplideSlide>
                    ))}
                </Splide>


                {/* Thumbnail Carousel */}
                <div className={styles.thumbnailWrapper}>
                    <Splide
                        options={thumbsOptions}
                        ref={thumbCarouselRef}
                        aria-label="Thumbnails"
                        id="thumbnail-carousel"
                    >
                        {imagesUrl.map((img, index) => (
                            <SplideSlide key={index}>
                                <div className={styles.thumbnail}>
                                    <img src={img} alt={`Thumbnail ${index + 1}`} />
                                </div>
                            </SplideSlide>
                        ))}
                    </Splide>
                </div>
            </div>

        </div>

    );
};

export default EventCarousel;

在此输入图片描述

我也尝试过 OutsideClickHandler 包，但它不起作用，因为如果我将它包裹起来，我什至无法使用 thunmbails

Answer 1

你可以试试这个：

    import { Splide, SplideSlide } from "@splidejs/react-splide";
import "@splidejs/react-splide/css";
import styles from "./CarousselStyles.module.scss";
import { useRef, useEffect } from "react"; // Import useRef and useEffect
import OutsideClickHandler from "react-outside-click-handler";
const EventCarousel = ({ imagesUrl, isOpen, onClose }) => {
    if (!isOpen) return null;

    const mainCarouselRef = useRef(null);
    const thumbCarouselRef = useRef(null);
    let imageRef = useRef()

    const mainOptions = {
        type: 'loop',
        width: '100%',
        height: '100%',
        pagination: false,
        arrows: false,
        drag: true,
    };

    const thumbsOptions = {
        type: 'slide',
        rewind: true,
        gap: '0.2rem',
        pagination: false,
        fixedWidth: 100,
        fixedHeight: 70,
        cover: true,
        focus: 'center',
        isNavigation: true,
        arrows: true,
    };

    useEffect(() => {
        const handler = (e) => {
            if (imageRef.current && !imageRef.current.contains(e.target)) {
                onClose;
                console.log(imageRef.current)
            }
        };

        document.addEventListener("mousedown", handler);

        return () => {
            document.removeEventListener("mousedown", handler);
        };
    }, [onClose]);

    // Sync the carousels
    useEffect(() => {
        if (mainCarouselRef.current && thumbCarouselRef.current) {
            const mainCarousel = mainCarouselRef.current.splide;
            const thumbCarousel = thumbCarouselRef.current.splide;

            if (mainCarousel && thumbCarousel) {
                mainCarousel.sync(thumbCarousel);
            }
        }
    }, []);

    return (

        <div className={styles.carouselOverlay} onClick={onClose}>
            <button className={styles.closeButton} onClick={onClose}>×</button>
            <div className={styles.carouselWrapper}>
                {/* Main Carousel */}

                <Splide
                    options={mainOptions}
                    ref={mainCarouselRef}
                    id="main-carousel"
                    aria-labelledby="thumbnail-carousel"
                >
                    {imagesUrl.map((img, index) => (
                        <SplideSlide key={index}>
                            <div className={styles.slideImage} onClick={(event) => event.stopPropagation()}>

                                <img onClick={(event) => event.stopPropagation()} ref={imageRef} src={img} alt={`Slide ${index + 1}`} />
                            </div>
                        </SplideSlide>
                    ))}
                </Splide>


                {/* Thumbnail Carousel */}
                <div className={styles.thumbnailWrapper}>
                    <Splide
                        options={thumbsOptions}
                        ref={thumbCarouselRef}
                        aria-label="Thumbnails"
                        id="thumbnail-carousel"
                    >
                        {imagesUrl.map((img, index) => (
                            <SplideSlide key={index}>
                                <div className={styles.thumbnail} onClick={(event) => event.stopPropagation()}>
                                    <img onClick={(event) => event.stopPropagation()} src={img} alt={`Thumbnail ${index + 1}`} />
                                </div>
                            </SplideSlide>
                        ))}
                    </Splide>
                </div>
            </div>

        </div>

    );
};

export default EventCarousel;

主要变化：

1. 为覆盖容器添加了 onClick 和 onClose 函数
2. 添加了点击图像块的 stopPropagation ，可以防止点击覆盖层以免关闭轮播。因此，如果我们点击图像本身，轮播将不会关闭，如果我们点击图像外部，轮播将关闭。

event.stopPropagation() - 使我们能够取消在块外弹出的事件，即点击图像时，点击覆盖层将不起作用。

如果这没有帮助，请告诉我