2

I'm working on a React project and I'm trying to use this library(https://www.npmjs.com/package/react-image-gallery)

from npm And from the Documentation, they say we must add these instructions to import the CSS

my component

import React from 'react'
import "~react-image-gallery/styles/css/image-gallery.css";
import "~react-image-gallery/styles/scss/image-gallery.scss";
import ImageGallery from 'react-image-gallery';
 export  function Features() {


const images = [
    {
      original: 'https://picsum.photos/id/1018/1000/600/',
      thumbnail: 'https://picsum.photos/id/1018/250/150/',
    },
    {
      original: 'https://picsum.photos/id/1015/1000/600/',
      thumbnail: 'https://picsum.photos/id/1015/250/150/',
    },
    {
      original: 'https://picsum.photos/id/1019/1000/600/',
      thumbnail: 'https://picsum.photos/id/1019/250/150/',
    },
  ];
return (
  
     
    <div>
      <ImageGallery items={images} />;
  
    </div>
   )
 }

my packeg json

"dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@mui/icons-material": "^5.2.4",
    "@mui/material": "^5.2.4",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.24.0",
    "bootstrap": "^5.1.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-image-gallery": "^1.2.7",
    "react-material-ui-carousel": "^3.1.1",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.0.2",
    "react-scripts": "4.0.3",
    "redux-thunk": "^2.4.1",
    "styled-components": "^5.3.3",
    "web-vitals": "^1.0.1"
},

But when I add this in my Component it gives me this ERROR

If there is no solution, please suggest to me the name of a library similar to this

enter image description here

skyboyer
  • 22,209
  • 7
  • 57
  • 64

2 Answers2

1

Thanks everyone, the issue is resolved I added this to the component

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

  import React from 'react'
import "react-image-gallery/styles/css/image-gallery.css";
import ImageGallery from 'react-image-gallery';
import {ImgGallery} from "./Styled.js"
export  function ShopDetails() {


    const images = [
        {
          original: 'https://picsum.photos/id/1018/1000/600/',
          thumbnail: 'https://picsum.photos/id/1018/250/150/',
        },
        {
          original: 'https://picsum.photos/id/1015/1000/600/',
          thumbnail: 'https://picsum.photos/id/1015/250/150/',
        },
        {
          original: 'https://picsum.photos/id/1019/1000/600/',
          thumbnail: 'https://picsum.photos/id/1019/250/150/',
           },
         ];
         return (
      
         
          <ImgGallery>
          <ImageGallery thumbnailPosition="left" useBrowserFullscreen={false} 
          showPlayButton={false} autoPlay={true} items={images} />;
      
        </ImgGallery>
        )
          }
  • 1
    so you have fixed your imports, "~" in path makes special sense to css-loader but not to JS imports. See https://stackoverflow.com/questions/39535760/what-does-a-tilde-in-a-css-url-do – skyboyer Dec 21 '21 at 23:41
0

You must import only the components from the library, not the css or scss files. For example import ImageGallery from 'react-image-gallery' and use it below like <ImageGallery/> as usual.

If it's not successful than try to import css/scss files to index.js

Can Berk Ocalir
  • 35
  • 8
  • I tried both cases if I do not call the style file the slider does not work –  Dec 21 '21 at 19:43
  • Do you know the name of any library similar to it? –  Dec 21 '21 at 19:51
  • There is a library called `Swiper` [link](https://www.npmjs.com/package/swiper) It has various style carousel sliders. – Can Berk Ocalir Dec 21 '21 at 19:58
  • I know about it, but I cannot control the vertical box. Or rather, it does not have a similar shape as I would like –  Dec 21 '21 at 20:30