Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: React carousal not working want css style sheet

Sundar Periasamy free asked 5 years ago


Expected behavior

Actual behavior

Resources (screenshots, code snippets etc.)


Konrad Stępień staff answered 5 years ago


Hi @Sundar Periasamy,

Do you have an error in console or your carousel does not work properly?

Can you send me your code and error if it exists?

If only your carousel does not work properly set these styles in your file.css and check if everything works correctly.

.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.carousel-fade .carousel-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block !important;
  opacity: 0;
  z-index: 0;
  transition: transform 0ms ease-in-out, opacity 0.8s ease-out;
}

.carousel-fade .carousel-item.active {
  position: relative;
  z-index: 1;
  opacity: 1;
}

.carousel-multi-item .carousel-item {
  display: inline-block !important;
}

.carousel .carousel-slide-item {
  transition: left 0.5s;
}

.carousel-control-prev, .carousel-control-next, .carousel-item-prev, .carousel-item-next {
  z-index: 2;
}

If you still have any problem I will be able to help.

Your regards, Konrad.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.16.0
  • Device: microsoft
  • Browser: chrome
  • OS: maango
  • Provided sample code: No
  • Provided link: No