问题描述
我以前从未构建过React滑块,但我一直在努力使其成为无限循环的幻灯片。当前有两张幻灯片,但我想制作一张,以便用户可以单击“下一个/上一个”按钮,并且幻灯片是无限的,一遍又一遍地重复幻灯片1和幻灯片2。
我为幻灯片内容构建了一个名为Testimonial
的容器。容器的宽度为800像素。
滑块具有next
和prev
按钮,以使滑块向左和向右移动。
Slider.tsx
import React,{ useState } from 'react';
import styled from '@emotion/styled';
import Img from 'gatsby-image';
import { SliderTypes } from '../../@types/types';
import Testimonial from '../components/Testimonial';
const Slider = (props: SliderTypes) => {
const sliderData = [
{
index: 0,image: 'image',header: 'Header text',testimonial: 'Testimonial description',},{
index: 1,];
const [properties,setProperties] = useState(sliderData);
const [property,setProperty] = useState(sliderData[0]);
const nextProperty = () => {
const newIndex = property.index + 1;
setProperty(properties[newIndex]);
};
const prevProperty = () => {
const newIndex = property.index - 1;
setProperty(properties[newIndex]);
};
return (
<>
<button
onClick={() => nextproperty()}
disabled={property.index === properties.length - 1}
>
Next
</button>
<button onClick={() => prevproperty()} disabled={property.index === 0}>
Prev
</button>
<CardSlider className={`card-slider active-slide-${property.index}`}>
<CardSliderWrapper
style={{
transform: `translateX(-${
property.index * (200 / properties.length)
}%)`,}}
>
{sliderData.map(({ index,image,header,testimonial }) => (
<Testimonial
key={index}
images={image}
header={header}
testimonial={testimonial}
/>
))}
</CardSliderWrapper>
</CardSlider>
</>
);
};
export default Slider;
我非常感谢您的见解。预先感谢!
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)