Build a React.js Image Carousel Gallery and Slideshow Using react-image-gallery Library in JSX

App.jsx

import ImageGallery from "react-image-gallery";
import "react-image-gallery/styles/css/image-gallery.css";
import img1 from "./assets/1.jpeg";
import img2 from "./assets/2.jpeg";
import img3 from "./assets/3.jpeg";
import img4 from "./assets/4.jpeg";
import img5 from "./assets/5.jpeg";
import img6 from "./assets/6.jpeg";

const images = [
  {
    original: img1,
    thumbnail: img1,
  },
  {
    original: img2,
    thumbnail: img2,
  },
  {
    original: img3,
    thumbnail: img3,
  },
  {
    original: img4,
    thumbnail: img4,
  },
  {
    original: img5,
    thumbnail: img5,
  },
  {
    original: img6,
    thumbnail: img6,
  },
];

function App() {
  return (
    <ImageGallery
      thumbnailPosition="top"
      showBullets={true}
      showIndex={true}
      autoPlay={true}
      items={images}
      slideDuration={1000}
      slideInterval={1000}
    />
  );
}

export default App;

import ImageGallery from "react-image-gallery";

import "react-image-gallery/styles/css/image-gallery.css";

import img1 from "./assets/1.jpeg";

import img2 from "./assets/2.jpeg";

import img3 from "./assets/3.jpeg";

import img4 from "./assets/4.jpeg";

import img5 from "./assets/5.jpeg";

import img6 from "./assets/6.jpeg";

const images = [

{

original: img1,

thumbnail: img1,

{

original: img2,

thumbnail: img2,

{

original: img3,

thumbnail: img3,

{

original: img4,

thumbnail: img4,

{

original: img5,

thumbnail: img5,

{

original: img6,

thumbnail: img6,

];

function App() {

return (

<ImageGallery

thumbnailPosition="top"

showBullets={true}

showIndex={true}

autoPlay={true}

items={images}

slideDuration={1000}

slideInterval={1000}

);

}

export default App;

Build a React.js Image Carousel Gallery and Slideshow Using react-image-gallery Library in JSX

Comments

Leave a Reply Cancel reply

Archives