Dot navigation breaks when carousel has less items than set

[benhodgson87]

Describe the bug
Dot navigation breaks when carousel contains less items than set in the responsive prop.

To Reproduce

1. Set slider to show 4 items at once
2. Add 2 items to slider
3. Should show 2 items, aligned to left, with single inactive dot
4. Clicking dot is still possible, which causes items to slide to the right, and sets dot to active

showDots={true}
responsive={{
  desktop: {
    breakpoint: { max: 4096, min: 721 },
    items: 4,
    slidesToSlide: 4
  },
  mobile: {
    breakpoint: { max: 720, min: 0 },
    items: 2,
    slidesToSlide: 2
  }
}}

Expected behavior
If there aren't enough items currently visible at a breakpoint to show more than one slide, the dots should either be hidden as navigation/showing the user where they are is unnecessary, or the button should be disabled.

eg. <button disabled={carouselState.totalItems <= carouselState.slidesToShow}>

Desktop:

• OS: OSX
• Firefox 69
• Chrome 77

[benhodgson87]

Also just tested this with infinite={true} set and seeing a completely different bug.

Instead of the dot being inactive, it is active, but clickable. Clicking it causes the slides to completely disappear. Clicking the button again does nothing.

Looking at where devtools is showing the render happening, it looks like the two slides are off to the left after the click, but don't get brought back.

Expected behaviour outlined above (disable/hide dots when not needed) would I think also avoid this.

[benhodgson87]

Resolved by #104

[YIZHUANG]

It's now in 2.4.1