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
1
vote
0 answers

I have error Using carousel in my page but not displaying on browser

hi I have error Using carousel in my page but not displaying on browser `doesn't desplay the carousel tried inspecting with dev tools in ms-edge but can't even find it on element and also it doesn't display any errors on browser this is my code…
Dawit sileshi
  • 11
  • 4
1
vote
0 answers

react-multi-carousel looking to give a free-scroll ability for carousel elements (targeting mobile)

I've been requested to give the react-multi-carousel component a free scroll ability for mobile using react-multi-carousel. So when a user swipes (L or R) on mobile, the default scrolls to the next carousel item. The default seems to lock that next…
Sean McIntyre
  • 55
  • 5
1
vote
0 answers

react-multi-carousel displays with gap on the right side

Here is how it displays: I added the Carousel with next parameters:
domanskyi
  • 701
  • 1
  • 6
  • 19
1
vote
1 answer

react multi carousel only showing one element per slide

I am using the react multi carousel library to display some divs. The code seems to be working in theory as you see below: import * as React from "react"; import "../styles/Home.css"; import Carousel from "react-multi-carousel"; import…
Juliette
  • 4,309
  • 2
  • 14
  • 31
1
vote
3 answers

Buttons outside of carousel elements [react-multi-carousel]

Is it possible to make the arrows/buttons on the right and left sides be outside of the carousel items? Links to the libarary: https://www.npmjs.com/package/react-multi-carousel https://w3js.com/react-multi-carousel
Norah Jones
  • 427
  • 5
  • 17
1
vote
2 answers

How to detect if the user has clicked on the arrows in react-multi-carousel?

How can I detect if the user has clicked the previous/next arrow to toggle the value of the autoplay in react-multi-carousel? return (
Pep
  • 647
  • 6
  • 20
1
vote
1 answer

Bootstrap not loaded in NextJs

I am trying to make simple NextJs Application where I included bootstrap. Package.json: "dependencies": { "@zeit/next-css": "^1.0.1", "@zeit/next-sass": "^1.0.1", "autoprefixer": "^9.8.6", "bootstrap": "^4.5.3", …
Undefined
  • 851
  • 5
  • 20
  • 48
1
vote
3 answers

Can somone help me understand why these arrows arent showing IN react-multi-carousel?

Been researching for days, the arrows aren't showing on react-carousel the picture looks like this: Image Of No arrows Im using Next .js It is my first time I havent had this problem with regular react apps import './carousel.scss' import Carousel…
user12044116
0
votes
0 answers

Package doesn't seem to function when I run `next export`

I've got a project where I'm using 'react-multi-carousel' to display a carousel. Since I am on react 18 and it kept asking for react 16, i had to use --legacy-peer-deps to install. When I run via next dev or next start it seems to show the carousel…
Gyryk
  • 29
  • 4
0
votes
0 answers

How do I center the items in react-multi-carousel?

I'm trying to center the items in the carousel, but whenever I try to use flexbox with the carousel it seems to break it in various ways. Does anyone know how I can accomplish this? this is what i am getting no matter what i try
akash bhandari
  • 13
  • 4
0
votes
1 answer

Buttons remove of carousel elements [react-multi-carousel]

How do I remove the arrows in the react-multi-carousel?
Killer
  • 19
  • 1
0
votes
1 answer

react-multi-carousel ssr does not work nextjs

i am trying to set up react-multi-carousel with ssr for my hero banner but it's always rendering the same error. I tried setting deviceType to just desktop for testing but nothing seemed to work. My code: import React from "react"; import Link from…
Ninja
  • 155
  • 1
  • 1
  • 6
0
votes
1 answer

Data-index of React-Multi-Carousel in infinity mode is not true

I want to make carousel slider with middle item (active item) is bigger than other. Like this image below So i use callback function of react-multi-carousel
duc nguyendinh trung
  • 73
  • 1
  • 9
0
votes
0 answers

Unable to move both Sliders because they have the same state

Hello guys I'm using react-multi-carousel with the custom slider functionality: (Carousel = val)} partialVisbile={false} customButtonGroup={} …
Razmi
  • 209
  • 1
  • 9
0
votes
0 answers

Removing an item from infinite carousel resets to first slide "react-multi-carousel"

How to stay on current slide itself without going back to first slide when any item removed from infinite loop option enabled carousel.
Sucharitha Suchi
  • 328
  • 3
  • 12
1
2
3