Stack Overflow
Stack Overflow

Questions tagged [pure-react-carousel]

Tips for how to configure and customize Pure React Carousel, A highly impartial suite of React components that can be assembled by the consumer to create a responsive and aria compliant carousel with almost no limits on DOM structure or CSS styles.

Use this tag to discuss how to use, configure, and style the suite of Pure React Carousel components. Pure React Carousel is a free, open source project. The goal of these React components is to behave like HTML tags. Specifically the suite of table tags like table, th, td, tr, etc. You can create a functional albeit plain looking table with these tags. It's up to you to arrange, configure and style the table.

Pure React Carousel has that same limited scope as the table tags. The carousel components come with minimal styling needed for functionality. It's up to the user to configure and style their carousel components.

This is where this tag is helpful. It allows the developer community to discuss HOW to use their carousel instead of creating issue tickets on github that are essentially usage questions.

19 questions
8
votes
6 answers

Super expression must either be null or a function nextjs 13

when I import import { Carousel } from "react-responsive-carousel"; and use it like bellow:
Md Parvez Musharaf
  • 81
  • 1
  • 3
3
votes
0 answers

Can't consume context in pure-react-carousel

I want to get the current slide index, so I'm trying to consume the CarouselContext. This is what I got and used from the documentation: const carouselContext = useContext(CarouselContext); const [currentSlide, setCurrentSlide] =…
U. Watt
  • 533
  • 1
  • 5
  • 27
3
votes
3 answers

How do I add spacing to my slides with pure react carousel

I am unsure on how to add "spacing" between my slides in pure react carousel. Is there any easy option how to add gaps between slides ? I've tried several approaches. I need correct padding when sliding one by one. When using margin, applying on…
mrbinky3000
  • 4,055
  • 8
  • 43
  • 54
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
3 answers

How to make number of visibleSlides responsive in CSS in pure-react-carousel

How/can we make number of visibleSlides responsive in CSS? / not have to use JS to alter visibleSlides based on breakpoints. For example; Each slide has min-width: 100px; min-height: 100px; ie. image we want to see detail so shouldn't be smaller…
Sam Turner
  • 21
  • 1
  • 3
2
votes
1 answer

How do I center the slides in pure react carousel

Is there a property I can set in pure-react-carousel to make the slides appear "centered". I've tried to find an option for this and there is none. Perhaps we can make a new prop like centered="true" to make this feature happen?
mrbinky3000
  • 4,055
  • 8
  • 43
  • 54
1
vote
0 answers

How to prevent open link when user dragging and ends dragging element?

I using react-responsive-carousel for carousel and I need to prevent open link when user dragging and ends dragging the element Help me How can I do this? small example what I mean:
Kirill Margheriti
  • 141
  • 1
  • 5
1
vote
1 answer

Carousel (pure CSS and npms) does not display well in ReactJS

I have tried to implement a simple carousel in react, I have used both pure css and libraries but in all cases it is always shown as follows img of result all child display in vertical line. I tried with this…
Emmanuel Garcia Martinez
  • 520
  • 3
  • 10
  • 24
0
votes
0 answers

Using Preact, but module requires React - failing to deploy

I'm failing to deploy to Vercel. I get the error below. Is there anyway that I can get this deployed without downloading the react bundle? Error: Cannot find module 'react' Require stack: -…
Lauro235
  • 121
  • 1
  • 8
0
votes
0 answers

Why my slider for 'pure-react-carousel' is gettining disoriented when page is refreshed?

I have a question, and it is really making my nights sleepless. I am making a group of cards to be mapped inside of the grid container , and mapping each card into grid item which takes 3 column space (i am using Material-Ui). Everything is working…
Himanshu Sharma
  • 315
  • 2
  • 9
0
votes
2 answers

React Card Carousel with no autoplay

I've been working with React Card Carousel. I've done a page with a card carousel, but I cannot figure out how to not autoplay the cards and find a way for the user to change them. This is the code. const candidates = [ {img: Verde, semestre:…
andres florian
  • 1
  • 1
0
votes
1 answer

How to make the carousel scroll only when the cursor is on it, istead of anywhere on the windows?

I am using react-elastic-carousel in my app to scroll vertically between four components and each of them has some infos to show when scrolling on them. What I want to do is that the scrolling functionality should be happend only when the cursor is…
saygas
  • 199
  • 3
  • 14
0
votes
1 answer

Not able to Type anything in input field inside pure-react-carousel

I am working on a functionality of a multi-step form with pure-react-carousel. I am using custom components (which are forms) as slides but not able to type anything in the input field, the input field is not getting focused on clicking them in any…
kailashthakuri
  • 79
  • 1
  • 7
0
votes
2 answers

How to reduce the number of product visible on my react carousel?

I have created a product carousel with react, it has 10 products, but I only want a max of 4 products to display at any one time, I tried reducing the width but that didn't work. Also had a look at the documentation for the carousel but couldn't…
RMP1992
  • 55
  • 1
  • 1
  • 9
0
votes
2 answers

Adding text or description to image component to pure-react-carousel

What is the appropriate way to add a description to each ? Currently I am adding a div under and I am unable to see the text.
Ross
  • 7
1
2