bugfix> javascript > 投稿

React Slickでカルーセルをカルーセル内に配置する方法はありますか?

import Slider from "react-slick";
<Slider
    {...settings}
>
        <div/>
        <div>
            <Slider
                {...settings}
            >
                ...
            </Slider>
       </div>
       <div/>
</Slider>

この種のコードを試しましたが、両方のカルーセルが完全に台無しになりました。

スワイプ、ドット、矢印は必要ありません。カルーセルは次を使用して完全に制御されます。 slickGoTo

回答 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>
    
    

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

あなたの答え