Stack Overflow
Stack Overflow

Questions tagged [react-multi-carousel]

Production-ready, lightweight fully customizable React carousel component that rocks supports multiple items and SSR(Server-side rendering).

Docs

https://w3js.com/react-multi-carousel

Github

https://github.com/YIZHUANG/react-multi-carousel

npm

https://www.npmjs.com/package/react-multi-carousel

Syntax

import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
const responsive = {
  superLargeDesktop: {
    // the naming can be any, depends on you.
    breakpoint: { max: 4000, min: 3000 },
    items: 5
  },
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 3
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1
  }
};
<Carousel responsive={responsive}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</Carousel>;
43 questions
5
votes
1 answer

React multi carousel doesn't do server side render

This is my Carousel, I am using react-multi-carousel and Nextjs and I am activating the ssr option import Carousel from 'react-multi-carousel' import 'react-multi-carousel/lib/styles.css' import CarouselImage from './CarouselImage' const…
EduardoAyora
  • 53
  • 1
  • 4
4
votes
3 answers

Using react-multi-carousel but unable to use custom dots

How I can get clickable custom dots of this carousel. I cannot bind a click event in the list item to move the carousel. I need a proper implementation between onClick and the li item to click on prev and next items in carousel Here is the full code…
Pankaj Swami
  • 43
  • 1
  • 6
4
votes
1 answer

How to make my react-multi-carousel use a light-box feature for my ReactJS app

I have images coming in from a rest api, into my application. Those images then get populated into a react-multi-carousel. What I would like to do is to make those images clickable for a light-box. I am fairly new to React. My code for the carousel…
Sole
  • 3,100
  • 14
  • 58
  • 112
3
votes
1 answer

How to move react-multi-carousel custom buttons at the top of the carousel?

I am react-multi-carousel library and i made custom buttons for it but i cant find a way on how to make buttons at the top of carousel instead it is at the bottom by default and position absoolute just messes everything on diferent screens. const…
Evaldas
  • 169
  • 7
3
votes
1 answer

React application has "Element type is invalid" error on production, but is working on development

In my React application, I got the following error using react-multi-carousel. However, it is only happening on Google Firebase hosting. It is working fine locally. My project is created with Vite and Tailwind CSS. The error: Error: Minified React…
Alex Aung
  • 2,637
  • 5
  • 34
  • 63
3
votes
0 answers

Nextjs and react-multi-carousel - Production build not rendering correctly

Hope you can help me as this issue is driving me crazy. I'm using react-multi-carousel in NextJs for my landing page, and to render 2 more carousels in another page, and while in dev environment is rendering correctly applying the styles, in…
laicuRoot
  • 31
  • 4
3
votes
6 answers

react-multi-carousel is not rendering

I'm getting data from the state. Now I want to make a carousel slider using react-multi-carousel I am trying to implement https://www.npmjs.com/package/react-multi-carousel for a news card component that has data coming from the API. So far my code…
Rajib karmaker
  • 466
  • 1
  • 5
  • 16
3
votes
1 answer

React carousel using React-Multi-Carousel

I am trying to implement https://www.npmjs.com/package/react-multi-carousel for a card component that has data coming from a rest api. So far my code is as follows, but the carousel does not seem to be implementing? Any ideas why? code.js import…
Sole
  • 3,100
  • 14
  • 58
  • 112
2
votes
0 answers

How to style the active component to its hover state in react multi carousel

Ive installed react multi carousel from here https://www.npmjs.com/package/react-multi-carousel. Here's my component toolsCardCarousel.js import React from 'react' import Carousel from "react-multi-carousel"; import…
Ishfaq Ahmed
  • 21
  • 1
  • 5
2
votes
2 answers

how to center image in react-multi-carousel?

I'm new to react, trying to build brand carousel using react-multi-carousel. The images are displayed properly but I want to center the image. Tried to write css it did not apply on the carousel. How this can be achieved, Or do I have to use any…
kbc
  • 65
  • 1
  • 7
2
votes
0 answers

How can I put the arrows in the center and outside the red border? React-multi-carousel

I'm using react-multi-carousel, What I would like to do is to always have the arrows in the middle and outside the border-box, how can I do that? Is there any trick in css to acomplish this? I tried to put the react-multiple-carousel__arrow--left…
Pep
  • 647
  • 6
  • 20
2
votes
1 answer

Fix spacing between items in multi-carousel

I'm trying to use the react-multi-carousel library to construct a responsive carousel with fixed size items. I want to fix the spacing between the items as well. However, with react-multi-carousel, the space between items depends on the number of…
user1968919
  • 153
  • 3
  • 13
2
votes
1 answer

React Multi Carousel - Problem with customButtonGroup

I've been struggling with what seems like a simple solution for far too long. I'm new to typescript and new to react. I'm trying to use the react-mulit-carousel NPM package. I'm able to get the customButtonGroup to work successfully in the…
rsnyder
  • 383
  • 1
  • 6
  • 19
2
votes
1 answer

React multi carousel renders items wrongly

I started using Next js and I don't know whether it is problem regarding to it or React itself. So the problem is that the "react-multi-carousel" does not work in my app. So, basically it works if I hardcode the values in there, but when I use my…
Anvar Abdulsatarov
  • 97
  • 1
  • 8
2
votes
1 answer

React images caption error from api maybe to do with correct Index

Following on from: How to make my react-multi-carousel use a light-box feature for my ReactJS app My app is using react-images for lightbox and react-carousel-images for the carousel. My api has a title and image. Problem I have is the title in the…
Sole
  • 3,100
  • 14
  • 58
  • 112
1
2 3