Due to the overflow: hidden on the carousel wrapper, all widgets are restricted from using css to position them outside of the wrapper.

For example, if I wanted to add a border to the carousel wrapper and needed the Previous and Next buttons to be visually placed outside of that border, absolutely positioning them to be outside won't work. They would just be visually hidden due to the wrapper's overflow: hidden property.

I imagine there is some way to create a widget that can be used to simply pass it's props onto some outside component, but I'm not really sure of the best way to do that. Any advice?

Reproduce

1. Use a mobile device to access the demo

2. Slide "frame1" to the right. "frame1" is above "frame2"，but it should have been "frame3"

3. Now "frame2" is active. Then slide "frame2" to the right ，"frame2" becomes "frame3" immediately when "onTouchMove"

4. Everything works fine after step 3

Awesome component! I love it & want to use it, but can't...

If the frames contain an element that responds to click/touch events, then the events don't propagate up to the parent and this component becomes unusable.

For example, if the frames only contain YouTube embeds...

<Carousel>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/J---aiyznGQ" frameBorder="0" allowFullScreen></iframe>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/J---aiyznGQ" frameBorder="0" allowFullScreen></iframe>
</Carousel>

Can be avoided if there was next/previous buttons to manually trigger a slide transition.

Right now there's no note on how this library acts for a screen reader, keyboard user, or just a user that doesn't read very fast. These are important considerations for a UI component to consider.

Please check out https://www.w3.org/WAI/tutorials/carousels/ for more information on things to consider.

2 specific issues I noticed with a quick glance at the docs:

1. The buttons in the button example aren't buttons! Not friendly to keyboard OR screen reader users
2. The link to the keyboard navigation example from the README is broken. Keyboard navigation is an important thing for keyboard-only users, though make sure that the implementation follows W3 accessibility guidelines!

I encounter the error when i trying to set style for Carousel. After checking at your code, maybe you want to change to let instead of const, so that objectAssign can overwrite the wrapper style.

Version 2.8.1 of enzyme just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As enzyme is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

First of all, nice carousel, congratulations.

I'm not sure how it will affect the size, but you can try styled-components.
https://www.styled-components.com/

Hi
thanks for your amazing slider
auto sliding doesn't start until I slide once

https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

I would like to work on this new feature.

Increase the accessibility of the carousel.

It would be a new prop

Carousel.js, line 371.

el.style.transfrom = `translate(${x}px, ${y}px)

Supposed to be

el.style.transform = `translate(${x}px, ${y}px)

How can I jump to a particular slide? I have to "reset" the slider to the first slide by code. I could not find any way to jump to the first slide (tried to find indicator click possibilities, but there are not implemented according to #100). Is there some way to achieve what I want to do?

Only happens when you use loop AND have only 2 frames. Add a 3rd frame and the issue goes away.

The current frame animates to the right and the incoming frame animates in from the left, overlapping the current frame's animation.

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

Your Greenkeeper Bot 🌴

Hello!

If a user scrolls vertically on a touch device, it would be nice to disable the active carousel frame by only allowing horizontal scrolling if demanded. I think changing to the next frame if the horizontal touchevent ended, could be useful and leaves that unwanted behavior.

Kudos for the library

using create-react-app, added a simple example as per the README

I just see a blank screen.
Is CSS or something else required to get up and running?

import React from "react";
import Carousel from 're-carousel'

class KwGame extends React.Component {
  render() {
    return (
      <Carousel auto>
        <div style={{backgroundColor: 'tomato', height: '100%'}}>Frame 1</div>
        <div style={{backgroundColor: 'orange', height: '100%'}}>Frame 2</div>
        <div style={{backgroundColor: 'orchid', height: '100%'}}>Frame 3</div>
      </Carousel>
    );
  }
}

export default KwGame

DOM stuff appears to be there, just doesn't show up.

I'm getting the following error when i'm trying to use the package

The file where i'm using the component

import React from 'react';
import Carousel from 're-carousel';
import Header from '../../components/Header';
import Footer from '../../components/Footer';
import sass from './index.scss';

const Project = () => {
  return (
    <div className={sass.projectCont}>
      <Header />
      <Carousel auto>
        <div style={{ backgroundColor: 'tomato', height: '100%' }}>Frame 1</div>
        <div style={{ backgroundColor: 'orange', height: '100%' }}>Frame 2</div>
        <div style={{ backgroundColor: 'orchid', height: '100%' }}>Frame 3</div>
      </Carousel>
      <Footer />
    </div>
  );
};

export default Project;

Hi,
currently the default scrolling is from left to right. Can you add a prop for right to left scrolling ?

Hi, great carousel!
Is it possible to fix this drag outside bug?

When we drag outside, the slider gets stuck, and you need to click again inside to release it.

I'm looking for some way to manipulate attributes for the current and previous frames.

For example, I'd like to toggle aria-hidden to be true/false depending on if the frame is showing or not.

I could do it in a widget using findDOMNode() and the index prop, but I'm hoping there is a better way. Passing these as refs to widgets is one idea. What do you think?

I found the example on how to do indicator dots, but I’d like to be able to click each dot to go to that slide. However, no way of doing that seems to be exposed?

how can implement with multi item like this

Hi.
I have included the carousel to my react App.js that contains further js ./component/ classes inside its div elements.
For example my "Post.js" in
<carousel axis={this.state.axis} widgets={ [ Other, Post, ..] } className="custom-class">
<p style={{backgroundColor: 'royalblue', height: '100%'}}>
<Post />
</p>

The app is loading all the content i have imported and added into the divs in a sequence (no errors), so it's all loaded and visible on one page - but without swiping at all - one js content under the other.

Did I miss a thing? Do I have to enable anything in css (like I have to enable dragable in html5?) or in my browser or do I need to use frames instead of divs or whatever?

Thanks and best regards,
Nini

if it contains a tag ,like this

<Carousel auto>
  <a href={{..}}>Frame 1</a>
  <a href={{..}}>Frame 2</a>
</Carousel>

link does not jump in Ios browser
need to do this in carousel.js to solve this problem

onTouchStart (e) {
    // if (this.state.total < 2) return
    // e.preventDefault()
    this.clearAutoTimeout()
    this.updateFrameSize()
    this.prepareSiblingFrames()
   ...
}

can i customize the animation??
for example instead of x y axis, fade effect

this.refs.wrapper.addEventListener("touchmove", this.onTouchMove, {
      capture: !0
    }), this.refs.wrapper.addEventListener("touchend", this.onTouchEnd, {
      capture: !0
    });

Is it should be?

this.refs.wrapper.addEventListener('touchmove', this.onTouchMove, {passive: true})
this.refs.wrapper.addEventListener('touchend', this.onTouchEnd, {passive: true})

See https://www.chromestatus.com/feature/5745543795965952

problem: when i use vertical mode.it seems hava conflict with body element's touch event.
resolve: add document.addEventListener('touchmove', function(e){e.preventDefault()}, false) ta body.
phone: android. WeChat 6.6.6

Changing the frame array's size post componentDidMount's execution the frames get placed incorrectly. If you increase the number of frames, the newly introduced frames get placed behind the frame currently at the center of the carousel, while lowering the number of frames might result in a blank carousel.

I've made a custom repo demo-ing this bug here.

I have used: npm install --save re-carousel but it does not install the package, what is the correct npm package name?

When trying to use this component in Storybook, I get the following error:

Element ref was specified as a string (wrapper) but no owner was set. This could happen for one of the following reasons:
  1. You may be adding a ref to a functional component
  2. You may be adding a ref to a component that was not created inside a component's render method 
  3. You have multiple copies of React loaded
See https://fb.me/react-refs-must-have-owner for more information.

Invariant Violation: Element ref was specified as a string (wrapper) but no owner was set. This could happen for one of the following reasons:
  1. You may be adding a ref to a functional component
  2. You may be adding a ref to a component that was not created inside a component's render method
  3. You have multiple copies of React loaded
See https://fb.me/react-refs-must-have-owner for more information.

Looks like it's due to using string refs.

When I try to use it within React App

<Row>
                <Col>
                    <Carousel loop widgets={[IndicatorDots]}>
                        {
                            (this.state.places !== undefined)
                            ?
                                this.state.places.map( (x, index) => {
                                    return <div key={index} ><Zone name={index} callModal={this.justBook} data={x}/></div>
                                })
                            : null
                        }
                    </Carousel>
                </Col>
            </Row>

I get the warning

Warning: A string ref, "wrapper", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref
div
t@http://localhost:3000/static/js/vendors~main.chunk.js:12438:7
div
./node_modules/react-bootstrap/esm/Col.js/Col<@http://localhost:3000/static/js/vendors~main.chunk.js:14528:18
div
./node_modules/react-bootstrap/esm/Row.js/Row<@http://localhost:3000/static/js/vendors~main.chunk.js:18605:18
div
./node_modules/react-bootstrap/esm/Container.js/Container<@http://localhost:3000/static/js/vendors~main.chunk.js:14725:18
Splash@http://localhost:3000/static/js/main.chunk.js:830:5
SignIn@http://localhost:3000/static/js/main.chunk.js:626:5
App

If I add ref={this.wrapper}, where this.wrapper = React.createRef() it doesn't help. If I comment out all carousel component, there are no errors