1

我以前从未构建过 React 滑块，我正在努力使其成为无限循环的幻灯片。目前有两张幻灯片，但我想这样做，以便用户可以单击下一个/上一个按钮，并且幻灯片是无限的，一遍又一遍地重复幻灯片 1 和幻灯片 2。

我为幻灯片内容构建了一个容器，名为Testimonial. 容器的宽度为 800px。

滑块具有next和prev按钮，可让滑块左右移动。

滑块.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,
      image: 'image',
      header: 'Header text',
      testimonial: 'Testimonial description',
    },
  ];

  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;

我很欣赏任何见解。提前致谢！

4

0 回答 0