Breaking News: Grepper is joining You.com. Read the official announcement!

use react awesome slider in react js

Glamorous Gnu answered on March 10, 2022 Popularity 9/10 Helpfulness 3/10

answer use react awesome slider in react js

use react awesome slider in react js

Comment

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

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: javascript slider

Link to this answer
Share Copy Link

Contributed on Mar 10 2022

Glamorous Gnu

0 Answers Avg Quality 2/10

use react awesome slider in react js

Contents

More Related Answers

use react awesome slider in react js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.