0

I have one personal nextjs poject and I need to use slides like "tiktok style". To do so I tried to use the library react-responsive-carousel on vertical mode. Everything seems to be all right in dev mode, but when I try to build it, then it doesn't show me anything. It just disappears. I confirm that the problem is only with the prop axis="vertical" while with default axis="horizontal" everything seems to be all right.

Did anyone had the same issue with this library?

This is my code:

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

const Body: NextPage = () => {
  return (
    <div>
      <Carousel
        emulateTouch
        showArrows={false}
        showStatus={false}
        showIndicators={false}
        showThumbs={false}
        width={"100%"}
        dynamicHeight
      >
        <Header />
        <AboutMe />
        <Projects />
        <Footer />
      </Carousel>
    </div>
  );
};

export default Body;

The purpose is to slide my pages vertically like reels or tiktok. I also tried the library react-slick but it has some troubles on mobile devices. It refreshes the page when I slide up.

Do you have any idea on how to fix this? Or do you have another solution?

p.s. I am not getting any error in console

Loudrous
  • 1,039
  • 10
  • 29

0 Answers0