What about using it as component and importing it on page.tsx file ? It works fine on my side but i have z-index issue and scroll is not smooth and not quiet responsive.

[MuzamilDev]

          What about using it as component and importing it on page.tsx file ? It works fine on my side but i have z-index issue and scroll is not smooth and not quiet responsive.

Originally posted by @ChetSocio in https://github.com/YIZHUANG/react-multi-carousel/issues/425#issuecomment-2152247254 React Slick is not working here too

[ChetSocio]

I would recommend you to look at shadcn carousel. It worked for me. If you wanna use this package then I have a way too. Don't use import 'react-multi-carousel/lib/styles.css' . Instead, create your own carousel.css file where you add z-index like given below and use it and import it like normal css file on pages where you will use the feature. Responsiveness entirely depends on the width of your containers and use case. I also believe that scrolling experience is not smooth in this package. It lags when someone clicks on link or other tag elements to scroll other divs. Shadcn carousel is more stable and smooth. But I decided to stick with this as i found shadcn late and it was part of my homepage ui.

.react-multiple-carousel__arrow {
  position: absolute;
  outline: 0;
  transition: all 0.5s;
  border-radius: 35px;
  z-index: 5;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
  min-width: 43px;
  min-height: 43px;
  opacity: 1;
  cursor: pointer;
}


.react-multiple-carousel__arrow::before {
  font-size: 20px;
  color: #fff;
  display: block;
  font-family: revicons;
  text-align: center;
  z-index: 2;
  position: relative;
}

I have used react multi carousel on https://batchnepal.com and shadcn carousel at https://batchnepal.com/topic/fix-unknown-at-rule-warning-in-vscode

[ChetSocio]

My css content of carousel.css file :

@font-face {
  font-family: "revicons";
  fallback: fallback;
  src: url("./revicons.woff") format("woff"),
    url("./revicons.ttf") format("ttf"), url("./revicons.eot") format("ttf");
}

.react-multi-carousel-list {
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.react-multi-carousel-track {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  position: relative;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, transition;
}

.react-multiple-carousel__arrow {
  position: absolute;
  outline: 0;
  transition: all 0.5s;
  border-radius: 35px;
  z-index: 5;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
  min-width: 43px;
  min-height: 43px;
  opacity: 1;
  cursor: pointer;
}

.react-multiple-carousel__arrow:hover {
  background: rgba(0, 0, 0, 0.8);
}

.react-multiple-carousel__arrow::before {
  font-size: 20px;
  color: #fff;
  display: block;
  font-family: revicons;
  text-align: center;
  z-index: 2;
  position: relative;
}

.react-multiple-carousel__arrow:disabled {
  cursor: default;
  background: rgba(0, 0, 0, 0.5);
}

.react-multiple-carousel__arrow--left {
  left: calc(4% + 1px);
}

.react-multiple-carousel__arrow--left::before {
  content: "\e824";
}

.react-multiple-carousel__arrow--right {
  right: calc(4% + 1px);
}

.react-multiple-carousel__arrow--right::before {
  content: "\e825";
}

.react-multi-carousel-dot-list {
  position: absolute;
  bottom: 0;
  display: flex;
  left: 0;
  right: 0;
  justify-content: center;
  margin: auto;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.react-multi-carousel-dot button {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  opacity: 1;
  padding: 5px 5px 5px 5px;
  box-shadow: none;
  transition: background 0.5s;
  border-width: 2px;
  border-style: solid;
  border-color: grey;
  padding: 0;
  margin: 0;
  margin-right: 6px;
  outline: 0;
  cursor: pointer;
}

.react-multi-carousel-dot button:hover:active {
  background: #080808;
}

.react-multi-carousel-dot--active button {
  background: #080808;
}

.react-multi-carousel-item {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .react-multi-carousel-item {
    flex-shrink: 0 !important;
  }

  .react-multi-carousel-track {
    overflow: visible !important;
  }
}

[dir="rtl"].react-multi-carousel-list {
  direction: rtl;
}

.rtl.react-multiple-carousel__arrow--right {
  right: auto;
  left: calc(4% + 1px);
}

.rtl.react-multiple-carousel__arrow--right::before {
  content: "\e824";
}

.rtl.react-multiple-carousel__arrow--left {
  left: auto;
  right: calc(4% + 1px);
}

.rtl.react-multiple-carousel__arrow--left::before {
  content: "\e825";
}