Hi,
I want to disable prev arrow on first slide and next arrow at last slide. it would be possible ? can I get current slide index to do it manually ?

Thank you for this awesome library.

Am currently work on a project where am using this library.

Initially the library was working flawlessly. After a month, I am to make changes to the repo. The carousel does not load until page is resized again. Am using carousel and nextjs 6.1

After the component is rendered, cycling between slides doesn't start automatically, despite the 'autoCycle' parameter being set; rather, one has to click on one of the arrows in order to 'kick start' the cycling, which performs as expected thereafter.

Are there plans to fix this issue? Or is there a quick-and-dirty workaround I might be able to employ in the meantime?

HI @gl0gl0, thank you for open sourcing this! I'm seeing the following error:

ReferenceError: window is not defined
    at /project-okay/node_modules/react-leaf-carousel/lib/react-infinite-carusel.min.js:6:14225

It seems that there needs to be a check for window before using it, which will then make it work on the server?

STEPS:

Having 20 elements in total in the carousel in portrait view, Tap the page # 7 to display the last elements of the carousel.
Now flip the device to turn the landscape view on.

RESULT:

See that now the pagination has 5 pages which is perfect because is splitting the 20 items in groups of 4, however the carousel is placing the first element as part of the last set of 4 items.

If you click the Page # 1 you can see that the elements are now properly arranged

Hi, i am Andrew. I liked your carousel. But I noticed one problem. If autoCycle is true, then when you change the resolution (for example, turn the phone), setTimeout is set again and there are two cycles. The more the resolution changes, the faster it starts to switch. I would like you to fix this problem so that I can fully use your library.
Thanks!

STEPS:

1. Open the URL: https://react-infinite-carousel-vrtbcxaige.now.sh/ in your mobile device (tablet or cellphone)
2. Check the page.

RESULT

See that the same content and element positions are coming up in your mobile device, there should be a mobile version for this carousel with less elements.

see image here:

As the title says when you move your mouse cursor from inside the carousel to an arrow and immediately click on the arrow, it doesn't work.

To reproduce:

1. Go to the sandbox here: https://codesandbox.io/s/dreamy-browser-bnfle
2. Move your cursor over the carousel but not on the arrows.
3. Move the cursor over an arrow and click it immediately.

You will see that the carousel doesn't move.

The cause of this probably is that in the <ul> tag on render function of the component, there is a listener for onMouseLeave event that is not prevented to be executed when the user is not dragging. (Probably the condition to attach this event and other event listeners related with drag is incorrect: should be dragging && !disableSwipeEvents and not the current dragging && !disableSwipeEvents)

I am load the images from an API response but they are not rendering in the carousel. Here is my code- I have added an additional rendering of the images just to show that in fact they are being returned.

import React, { Component } from "react";
import "./App.css";
import InfiniteCarousel from "react-leaf-carousel";
import axios from "axios";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: []
    };
  }

  componentDidMount() {
    axios
      .get("https://randomuser.me/api/?results=5")
      .then(response => this.setState({ data: response.data.results }));
  }

  render() {
    let images = this.state.data.map(image => {
      return <img key={image.cell} src={image.picture.large} alt="" />;
    });

    if (this.state.data) {
      return (
        <div className="App">
          <InfiniteCarousel
            breakpoints={[
              {
                breakpoint: 500,
                settings: {
                  slidesToShow: 2,
                  slidesToScroll: 2
                }
              },
              {
                breakpoint: 768,
                settings: {
                  slidesToShow: 3,
                  slidesToScroll: 3
                }
              }
            ]}
            dots={false}
            showSides={true}
            sidesOpacity={0.5}
            sideSize={0.1}
            slidesToScroll={4}
            slidesToShow={4}
            scrollOnDevice={true}
          >
            {this.state.data.map(image => {
              return (
                <div key={image.cell}>
                  <img key={image.cell} src={image.picture.large} alt="" />
                </div>
              );
            })}
          </InfiniteCarousel>
          {this.state.data.map(image => {
            return (
              <div key={image.cell}>
                <img key={image.cell} src={image.picture.large} alt="" />
              </div>
            );
          })}
        </div>
      );
    } else {
      return <div className="App">Loading</div>;
    }
  }
}

export default App;

images not render with .map()... why?

STEPS:

1. Open the URL: https://react-infinite-carousel-vrtbcxaige.now.sh/
2. Click the next or previous links several times

RESULT

See that once you start clicking the links, the carousel's elements inverts their direction

Please see the following video for more details:

https://screencast.com/t/5rOxFgDfMK

Hi, there's a weird behavior in mobile.

As you can see in the image below, once I've set the viewport and hit refresh. The elements does not seem to load properly.

Thank you for your time and work! I am trying to add my custom arrow buttons but cannot get them to work.
I am adding them as React functional component and they are showing but do not acquire any necessary classes / attributes.

I also tried adding it as icon but same result.

Could you please help? (please forgive my inline styling)

Hi there, I'm looking for a config to jump on to a specific page number instead of starting from the first page. Please advise.

Hello!

Thank you very much for this amazing library, it has been very helpful for our project, but i found a bug realted with the dot navigation, i made a new installation and when I clicked in any button took me to a different slide that the one that I tried to access.
you can check the implementation I did here

![leaf-loader-infinite](https://user-images.githubusercontent.com/65680545/88200436-bfa21b00-cc0b-11ea-8f6f-5aef00616e0e.gif)

Hope you can find a solution!

STEPS

By using an iPad or a mobile device go to: https://react-infinite-carousel-uszkpdnpia.now.sh/
Place your carousel in Page 1
Click the "Previous" link or swipe to your right.

RESULT

See that the carousel is showing blank spacing, and then after 2 seconds the items are coming up.

Hi! Is there a way to get this to smoothly slide continuously kinda like a news ticker?
Without the quick jump from slide to slide.

Hi, how to change the point style? http://take.ms/y4LNp

I have anchor tags as children to InfiniteCarousel component. On click of child item its not going to the given href hyperlink.

Hello everybody,

is it a way to slide the carousel with the mouse wheel or for example with the apple magic mouse?

Thanks in advance

The carrousel generate the same id for other components.

The second carousel not it's showing because are using the same id.

STEPS:

1. Open the URL: https://react-infinite-carousel-vrtbcxaige.now.sh/
2. Resize the screen by dragging each corner

RESULT

When resizing the screen, the carousel is not keeping the same elements positions, it start moving by its own.

Please see the following video for more details:

https://screencast.com/t/Uxygs0HTN

Hi there,

First, I would just like to say I really like your carousel over many others.

The issue I am having is the swiping doesn't seem to work, I'd like to be able to drag the carousel horizontally on large screens (desktop/laptop) not just on devices. Swipe={true} doesn't work? or is this not what it's intended for? If not, is it possible to implement?

Thanks

Hello everybody,

is it not possible that the carousel is infinite on mobile devices?

Thanks in advance

Each li width is somehow being set to 1px until the screen is resized. Once that happens, the width is set to the correct value. Please see screenshot below.

STEPS:

Using IE11 or Edge 14 and having your browser in full screen open the URL: https://react-infinite-carousel-vrtbcxaige.now.sh/

Reduce the size of the screen until the carousel display 2 elements per page.

Now, click the maximize button from the upper right corner of your browser.

RESULT

See that the browser is still displaying 2 elements but now is full screen. See attached image:

Now click the minimize button

See that the page is broken, as the titles are not getting smaller:

Hi,

Trying to implement a smooth infinite scroll for a landing page logo animation, what settings could I use to achieve this?

Many thanks,

Sean.

Giving custom next and previous icons are not working. Icons are displaying. They do not follow the default position of default arrows and upon clicking them, carousel is not updated.

nextArrow={<NextIcon /> }
prevArrow={<PreviousIcon />}

Codesandbox for the issue

Hello from the beginning tell you that I love the carousel is very easy to use and configure, thanks!
On the other hand, I wanted to know how to do so that instead of one row products are shown in 2 rows one below the other with the same amount of objects.

I am using google translator to write this, apologies in advance if something is not understandable

STEPS:

Having your browser is full screen open the URL: https://react-infinite-carousel-vrtbcxaige.now.sh/
Check the first element:

Now, set your browser to: 768px x 880px

See that now only 3 elements are coming up, and the pagination is now 1 to 7.

Click the # 1 from the pagination list.

See that you are in page 1. But as you can see the green element is not longer there. And if you inspect the element and click the page # 3 you can see that the elements are not listed as they should be.