React Slick 有没有办法让 Carousel 在 Carousel 中？答案

【问题标题】：Is there a way with React Slick to have a Carousel inside a Carousel?React Slick 有没有办法让 Carousel 在 Carousel 中？
【发布时间】：2020-11-14 15:41:00
【问题描述】：

React Slick 有没有办法让 Carousel 在 Carousel 中？

import Slider from "react-slick";

<Slider
    {...settings}
>
        <div/>
        <div>
            <Slider
                {...settings}
            >
                ...
            </Slider>
       </div>
       <div/>
</Slider>

我尝试了这种代码，但它完全搞砸了两个轮播。

我不需要滑动、点或箭头，使用slickGoTo 完全控制轮播。

【问题讨论】：

标签： javascript reactjs carousel react-slick

【解决方案1】：

我解决了我的问题，我们可以使用这个组件有 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>

/!\ 您不能在 Slider 内的 <input> 上使用 autoFocus 道具（步骤 1 除外）

【讨论】：