react-responsive-carousel is not displaying images/ not working

Question

react-responsive-carousel is not displaying images/ not working

725 Views Asked by njz At 20 October 2024 at 08:42

import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";

function App() {
  return (
    <Carousel showArrows={true}>
      <div>
        <img src="../assets/1.jpeg" alt="image1" />
        <p className="legend">Legend 1</p>
      </div>
      <div>
        <img src="../assets/2.jpeg" alt="image2" />
        <p className="legend">Legend 2</p>
      </div>
      <div>
        <img src="../assets/3.jpeg" alt="image3" />
        <p className="legend">Legend 3</p>
      </div>
    </Carousel>
  );
}

export default App;

i added the css file in App component similar like react-responsive-carousel but it is not working

carousel.min.css


import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";

It should be working but not sure why this is happening

Original Q&A

There are 1 best solutions below

**Farbod Shabani** · Accepted Answer

I don't know about this library, But I can see you are not doing something complicated with your carousel. So basically why don't you create one for yourself? I have a base code that could help you in this matter. I create a carousel with React and Static UI(HTML, CSS, JS). I think it can actually help you out.

replit, codesandbox, Stackblitz

these versions are written with html css js and nothing else.

replit, codesandbox, Stackblitz

In your scenario I will do this:

const modalSlidesContainer = document.querySelector(".modal-slides-container");
const modalWidth = 300;

let modalPage = 0;



const nextPage = () => {
  modalPage++;
  modalSlidesContainer.style.margin = `0px 0px 0px -${modalWidth * modalPage}px`;
};

const previousPage = () => {
  modalPage--;
  modalSlidesContainer.style.margin = `0px 0px 0px -${modalWidth * modalPage}px`;
};

/* you set root to define varibales */
:root { 
  --modal-width: 300px;
  --modal-height: 400px;
  --number-of-pages: 5;
}


html body{
  margin: 0px;
}

.modal-background{
  background-color: rgba(0,0,0,0.4);
  position: absolute; 
  top: 0;
  width: 100vw; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  z-index: 0;
}


.modal-boundary{
  width: var(--modal-width); /* the width boundary must be as same as every modal slide*/
  height: var(--modal-height);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  overflow-x: hidden;
  z-index: 10;
  /* the max width must be as same as the width of modal ModalBoundary*/
  @media screen and (max-width: var(--modal-width)) {
    width: 100vw;
    height: 100vh;
}
}

/*  This container contains every slide you gonna use in your modal   */
.modal-slides-container{
  min-width: calc(var(--modal-width) * var(--number-of-pages)); /* The width must be total width of all the slide you gonna use */
  height: var(--modal-height);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  background-color: white !important;
  /*here is how to control carousel movement*/
  margin: 0px; /*this how we control the place of the modal*/
  transition: margin 1s; /*this how you control the animation of carousel when it's changing steps */
  }

  
.modal-slide{
  width: var(--modal-width);
  height: var(--modal-height); /* in this scenario the total height of slide must be as same as modal height*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white !important;
 }

.button-container{
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
}

.navigation-button{
  margin: auto;
}

<body>
  <div class="modal-background">
    <div class="modal-boundary">
      <div class="modal-slides-container">
        <div class="modal-slide">
          <img alt="first image" src="https://picsum.photos/200/200" />
          <p> Legend One </p>
          <div class="button-container">
            <button onclick="nextPage()" class="navigation-button">
              next
            </button>
          </div>
        </div>
        <div class="modal-slide">
          <img alt="second image" src="https://picsum.photos/200/200" />
          <p> Legend Two </p>
          <div class="button-container">
            <button onclick="previousPage()" class="navigation-button">
              previous
            </button>
            <button onclick="nextPage()" class="navigation-button">
              next
            </button>
          </div>
        </div>
        <div class="modal-slide">
          <img alt="third image" src="https://picsum.photos/200/200" />
          <p> Legend Three </p>
          <div class="button-container">
            <button onclick="previousPage()" class="navigation-button">
              previous
            </button>
            <button onclick="nextPage()" class="navigation-button">
              next
            </button>
          </div>
        </div>
        <div class="modal-slide">
          <img alt="fourth image" src="https://picsum.photos/200/200" />
          <p> Legend Four </p>
          <div class="button-container">
            <button onclick="previousPage()" class="navigation-button">
              previous
            </button>
            <button onclick="nextPage()" class="navigation-button">
              next
            </button>
          </div>
        </div>
        <div class="modal-slide">
          <img alt="fifth image" src="https://picsum.photos/200/200" />
          <p> Legend five </p>
          <div class="button-container">
            <button onclick="previousPage()" class="navigation-button">
              previous
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

I hope this helps you.^-^

react-responsive-carousel is not displaying images/ not working

There are 1 best solutions below

Related Questions in REACTJS

Related Questions in REACT-RESPONSIVE-CAROUSEL

Trending Questions

Popular # Hahtags

Popular Questions