React Slick是否有办法在Carousel中安装Carousel?
import Slider from "react-slick";
<Slider
{...settings}
>
<div/>
<div>
<Slider
{...settings}
>
...
</Slider>
</div>
<div/>
</Slider>
我尝试过这种代码,但是完全弄乱了两个轮播。我不需要使用
slickGoTo
完全控制滑动,点或箭头,轮播。 最佳答案
我解决了我的问题,我们可以使用此组件将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 prop(步骤1除外)关于javascript - React Slick是否有办法在转盘中放置转盘?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/63079226/