Implementing React Awesome Slider

Question

I've started recently learning React and I'm having trouble to implement the React Awesome Slider in my code. https://github.com/rcaferati/react-awesome-slider

Heres my code so far. I'm trying to make the div class item work as a slider, but even though I got 3 ids as shown in my data, it only appears to be displaying the first id in the carousel.

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

Try this (codesandbox - https://codesandbox.io/s/musing-mclean-8ukzs?file=/src/App.js.

In the code you have shown, AwesomeSlider is nested within the loop so there are multiple instances of it being created. According to the docs, there should only be one instance which should be wrapping your loop mechanism.

By the way, in your loop there is a hardcoded src for the last img tag - ensure that is referencing a field in your array of objects :).

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>
  );
}