React Slickを使用して、カルーセルをカルーセル内に配置する方法はありますか？

私は私の問題を解決しました、このコンポーネントで2つのレベルの複数のネストされたスライダーを持つことができます：

Carousel.js

import React, {useEffect, useRef, useState} from 'react';
import PropTypes from 'prop-types';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import './carousel.scss';
function isInt(value) {
    return !isNaN(value) && (function (x) {
        return (x | 0) === x;
    })(parseFloat(value))
}
function resize() {
    // Trigger resize (IE compatible)
    if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
        let event = document.createEvent('UIEvents');
        event.initUIEvent('resize', true, false, window, 0);
        window.dispatchEvent(event);
    } else {
        window.dispatchEvent(new Event('resize'));
    }
}
function Carousel(props) {
    const {children, className, initialSlide, onChange, current, speed, ...rest} = props;
    const sliderRef = useRef(null);
    useEffect(() => {
        initialSlide && setStep(initialSlide)
    }, [initialSlide]);
    useEffect(() => {
        isInt(current) && setStep(current);
    }, [current]);
    const [step, setStep] = useState(initialSlide || 0);
    useEffect(() => {
        step < 0 && setStep(0);
        step > children.length && setStep(children.length);
        sliderRef.current.slickGoTo(step);
        onChange && onChange(step);
    }, [step]);
    const settings = {
        accessibility: false,
        adaptiveHeight: false,
        arrows: false,
        className: className,
        dots: false,
        infinite: false,
        initialSlide: initialSlide || 0,
        slideIndex: initialSlide || 0,
        slidesToScroll: 1,
        slidesToShow: 1,
        speed: speed || 500,
        swipe: false
    };
    const handleBeforeChange = (_, index) => {
        onChange && onChange(index);
        // This setTimeout is needed for adaptive height in nested Carousel
        setTimeout(() => {
            resize();
        }, speed || 500);
    };
    return (
        <Slider
            beforeChange={handleBeforeChange}
            ref={sliderRef}
            {...settings}
            {...rest}
        >
            {React.Children.map(children, (child, index) => (
                    child
                        ? <React.Fragment
                            key={`slide-${index}`}
                        >
                            {React.cloneElement(child, {
                                step: step,
                                setStep: setStep
                            })}
                        </React.Fragment>
                        : () => {
                        }
                )
            )}
        </Slider>
    );
}
Carousel.propTypes = {
    className: PropTypes.string,
    current: PropTypes.number,
    initialSlide: PropTypes.number,
    speed: PropTypes.number,
    onChange: PropTypes.func
};
export default Carousel;

AdaptiveHeightのサイズ変更は、アニメーションの最初と最後で処理されます。

このように使用してください：

<Carousel adaptiveHeight speed={1000} {...props}>
   <Component/>
   <Carousel adaptiveHeight speed={750} {...props}>
       <Component/>
       <Component/>
       <Component/>
       <Component/>
   </Carousel/>
   <Component/>
</Carousel>

/！\ autoFocusプロップをオンにすることはできません <input> スライダーの内側（ステップ1を除く）