如何解决自动播放时如何更改反应光滑轮播的按钮图标?
我的 reactJS 网页有一个带有 2 个按钮的 react-slick carousel。一种是暂停自动播放,另一种是开始自动播放 自动播放正在工作,暂停按钮也在工作,但单击时不会更改为播放图标。 我怎样才能制定我的条件,让它能够在点击时更改图标?
const Home = () => {
const [data,setData] = useState([{}]);
const [isLoading,setIsLoading] = useState(true);
const [autoplayOn,setAutoplayOn] = useState(true);
const settings = {
infinite: true,speed: 500,slidesToShow: 1,slidesToScroll: 1,autoplay: true,};
const customeSlider = React.createRef();
const gotoNext = () => {
customeSlider.current.slickNext();
};
const goToPlay = () => {
customeSlider.current.slickPlay();
};
const goToPause = () => {
customeSlider.current.slickPause();
};
const gotoPrev = () => {
customeSlider.current.slickPrev();
};
const fetchData = async () => {
try {
const response = await axios.get(
"https://art-ceramic.herokuapp.com/home"
);
setData(response.data);
setIsLoading(false);
} catch (error) {
console.log(error.message);
}
};
useEffect(() => {
setTimeout(() => setIsLoading(false),12000);
fetchData();
},[]);
return isLoading ? (
<span></span>
) : (
<div className="home-container">
<div className="row">
<div className="menu-ordi">
<Left />
</div>
<div className="product-images">
<Slider
{...settings}
className="carousel"
arrows={true}
ref={customeSlider}
>
{data.products.map((el) => {
return (
<div className="div-carousel">
{el.product_image && (
<img
className="pics"
src={el.product_image.url}
alt="home-carousel"
/>
)}
</div>
);
})}
</Slider>
<div className="description-work">
<div className="nextt row">
<button className="click-n" onClick={() => gotoPrev()}>
<FontAwesomeIcon icon={faChevronLeft} />
</button>
{settings.autoplay ? (
<button
className="click-n"
onClick={() => {
goToPause();
}}
>
<FontAwesomeIcon icon={faPause} />
</button>
) : (
<button className="click-n">
<FontAwesomeIcon icon={faPlay} onClick={() => goToPlay()} />
</button>
)}
<button className="click-n" onClick={() => gotoNext()}>
<FontAwesomeIcon icon={faChevronRight} />
</button>
</div>
</div>
</div>
</div>
</div>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。