实现React Awesome Slider

Question

我最近开始学习React，在我的代码中实现React Awesome Slider遇到了麻烦。https://github.com/rcaferati/react-awesome-slider

到目前为止，这是我的代码。我试图让div类项目作为滑块工作，但即使我在数据中显示了3个id，它似乎只显示了carousel中的第一个id。

import "./Work.scss";
import { useState } from "react";
import AwesomeSlider from 'react-awesome-slider';
import 'react-awesome-slider/dist/styles.css';
 

export default function Work(){
    const data = [
        {
          id: "1",
          icon: "asset/mobile.png",
          title: "Web Design",
          desc:
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
          img:
            "https://99designs-blog.imgix.net/blog/wp-content/uploads/2018/10/attachment_100040756-e1538485934255.jpeg?auto=format&q=60&fit=max&w=930",
        },
        {
          id: "2",
          icon: "asset/globe.png",
          title: "Mobile Application",
          desc:
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
          img:
            "https://i.pinimg.com/originals/e9/c9/2f/e9c92f7869d682a6fa5a97fb8a298f30.jpg",
        },
        {
          id: "3",
          icon: "asset/writing.png",
          title: "Branding",
          desc:
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
          img:
            "https://i.pinimg.com/originals/a9/f6/94/a9f69465d972a004ad581f245d6ad581.jpg",
        },
      ];

    return(
        <div className="work" id="work">
            <h1>My Services</h1>
            <div className="slider">
                {data.map((d)=> (
                <div className="container">
                   <AwesomeSlider>
                    <div className= "item">
                        <div className="left">
                            <div className="leftContainer">
                                <div className="imgContainer">
                                    <img src= {d.icon}/>
                                </div>
                                <h2>{d.title}</h2>
                                <p>{d.desc} </p>
                            </div>
                        </div>

                        <div className="right">
                            <img src="https://99designs-blog.imgix.net/blog/wp-content/uploads/2018/10/attachment_100040756-e1538485934255.jpeg?auto=format&q=60&fit=max&w=930"/>
                        </div>
                    </div>
                    </AwesomeSlider>
                </div>
                ))}
            </div>
        </div>
    );
                
}

Answer 1

试试这个(codesandbox - https://codesandbox.io/s/musing-mclean-8ukzs?file=/src/App.js。

在您所显示的代码中，AwesomeSlider嵌套在循环中，因此创建了它的多个实例。根据文档，应该只有一个实例应该包装您的循环机制。

顺便说一下，在您的循环中，最后一个img标记有一个硬编码的src --确保它引用了对象数组中的一个字段:)。

import AwesomeSlider from "react-awesome-slider";
import "react-awesome-slider/dist/styles.css";

export default function App() {
  const data = [
    {
      id: "1",
      icon: "asset/mobile.png",
      title: "Web Design",
      desc:
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
      img:
        "https://99designs-blog.imgix.net/blog/wp-content/uploads/2018/10/attachment_100040756-e1538485934255.jpeg?auto=format&q=60&fit=max&w=930"
    },
    {
      id: "2",
      icon: "asset/globe.png",
      title: "Mobile Application",
      desc:
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
      img:
        "https://i.pinimg.com/originals/e9/c9/2f/e9c92f7869d682a6fa5a97fb8a298f30.jpg"
    },
    {
      id: "3",
      icon: "asset/writing.png",
      title: "Branding",
      desc:
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
      img:
        "https://i.pinimg.com/originals/a9/f6/94/a9f69465d972a004ad581f245d6ad581.jpg"
    }
  ];
  return (
    <div className="App">
      <AwesomeSlider>
        {data.map((d) => (
          <div className="item">
            <div className="left">
              <div className="leftContainer">
                <div className="imgContainer">
                  <img src={d.icon} />
                </div>
                <h2>{d.title}</h2>
                <p>{d.desc} </p>
              </div>
            </div>

            <div className="right">
              <img src="https://99designs-blog.imgix.net/blog/wp-content/uploads/2018/10/attachment_100040756-e1538485934255.jpeg?auto=format&q=60&fit=max&w=930" />
            </div>
          </div>
        ))}
      </AwesomeSlider>
    </div>
  );
}

Answer 2

我用立方体动画来回答这个问题。请试试看

import AwesomeSlider from "react-awesome-slider";
import "react-awesome-slider/dist/styles.css";
import 'react-awesome-slider/dist/custom-animations/cube-animation.css';

export default function App() {
  const data = [
    {
      id: "1",
      icon: "asset/mobile.png",
      title: "Web Design",
      desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
      img: "https://99designs-blog.imgix.net/blog/wp-content/uploads/2018/10/attachment_100040756-e1538485934255.jpeg?auto=format&q=60&fit=max&w=930",
    },
    {
      id: "2",
      icon: "asset/globe.png",
      title: "Mobile Application",
      desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
      img: "https://i.pinimg.com/originals/e9/c9/2f/e9c92f7869d682a6fa5a97fb8a298f30.jpg",
    },
    {
      id: "3",
      icon: "asset/writing.png",
      title: "Branding",
      desc: "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
      img: "https://i.pinimg.com/originals/a9/f6/94/a9f69465d972a004ad581f245d6ad581.jpg",
    },
  ];
  return (
    <div className="App">
      <AwesomeSlider animation="cubeAnimation">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
      </AwesomeSlider>
    </div>
  );
}