Pure React Carousel Component

Overview

Maintenance Status

nuka-carousel

A Pure ReactJS Carousel Component

Nuka Carousel Animated Example

Install

To add nuka-carousel to your project run the following command in your project folder.

$ yarn add nuka-carousel

OR

$ npm install nuka-carousel

Example

import React from 'react';
import Carousel from 'nuka-carousel';

export default class extends React.Component {
  render() {
    return (
      <Carousel>
        <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide1" />
        <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide2" />
        <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide3" />
        <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide4" />
        <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide5" />
        <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide6" />
      </Carousel>
    );
  }
}

Running demo locally

The demo can be launched on your local machine via webpack-dev-server. Once you have cloned this repo locally, run the following:

yarn
yarn build
yarn start

You can access the application on your localhost at the following url: Local Demo

Or on CodeSandBox: Edit silly-rhodes-5pr2i

Keyboard Controls

Key Combination Function
Right/Up Arrow or D/W key Next slide
Left/Down Arrow or A/S key Previous slide
Q key First slide
E key Last slide
SpaceBar When autoplay={true} pauses and unpauses carousel
  • Keyboard shortcuts are disabled as a default. To enable them set enableKeyboardControls prop to true.
  • keyCodeConfig prop can be used to configure the default keyCodes

Props

Name PropType Description Default
afterSlide React.PropTypes.func Hook to be called after a slide is changed.
animation React.PropTypes.oneOf(['zoom']) Adds a zoom effect on the currently visible slide. A transform: scale(0.85) is set as default, however, the scale can be customized using zoomScale prop. Property is applied on all slides except the current 1. Use cellAlign to align the slide with zoom effect where you'd like.
autoGenerateStyleTag React.PropTypes.bool When set to true, it will generate a style tag to help ensure images are displayed properly. Set to false if you don't want or need the style tag generated. true
autoplay React.PropTypes.bool Autoplay mode active. false
autoplayInterval React.PropTypes.number Interval for autoplay iteration. 3000 milliseconds
autoplayReverse React.PropTypes.bool Only meaningful when autoplay is already true. When autoplayReverse is also true, autorotation cycles through slides indexes from high to low. false
beforeSlide React.PropTypes.func Hook to be called before a slide is changed
cellAlign React.PropTypes.oneOf(['left', 'center', 'right']) When displaying more than one slide, sets which position to anchor the current slide to. Is overridden to left when transitionMode="fade"
cellSpacing React.PropTypes.number Space between slides, as an integer, but reflected as px
enableKeyboardControls React.PropTypes.bool When set to true will enable keyboard controls when the carousel has focus. If the carousel does not have focus, keyboard controls will be ignored. false
keyCodeConfig PropTypes.exact({ previousSlide: PropTypes.arrayOf(PropTypes.number), nextSlide: PropTypes.arrayOf(PropTypes.number), firstSlide: PropTypes.arrayOf(PropTypes.number), lastSlide: PropTypes.arrayOf(PropTypes.number), pause: PropTypes.arrayOf(PropTypes.number) }) If enableKeyboardControls prop is true, you can pass configuration for the keyCode so you can override the default keyboard keys configured. { nextSlide: [39, 68, 38, 87], previousSlide: [37, 65, 40, 83], firstSlide: [81], lastSlide: [69], pause: [32] }
getControlsContainerStyles React.PropTypes.func callback function to provide style to controls containers
defaultControlsConfig React.PropTypes.shape({ containerClassName: PropTypes.string, nextButtonClassName: PropTypes.string, nextButtonStyle: Proptypes.object, nextButtonText: PropTypes.string, prevButtonClassName: PropTypes.string, prevButtonStyle: PropTypes.object, prevButtonText: PropTypes.string, pagingDotsContainerClassName: PropTypes.string, pagingDotsClassName: PropTypes.string, pagingDotsStyle: PropTypes.object }) This prop lets you apply custom classes and styles to the default Container. Next, Previous, and Paging Dots controls. More information on how to customize these controls can be found below. {}
disableAnimation React.PropTypes.bool When set to true, will disable animation. false
disableEdgeSwiping React.PropTypes.bool When set to true, will disable swiping before first slide and after last slide. false
dragging React.PropTypes.bool Enable mouse swipe/dragging. true
easing React.PropTypes.string Animation easing function. See valid easings here: D3 Easing Functions
edgeEasing React.PropTypes.string Animation easing function when swipe exceeds edge. See valid easings here: D3 Easing Functions
frameOverflow React.PropTypes.string Used to set overflow style property on slider frame. hidden
framePadding React.PropTypes.string Used to set the margin of the slider frame. Accepts any string dimension value such as "0px 20px" or "500px"
heightMode React.PropTypes.oneOf(['first', 'current', 'max']) Change the height of the slides based either on the first slide, the current slide, or the maximum height of all slides. Overrides height set by initialSlideHeight
innerRef React.PropTypes.oneOfType([ React.PropTypes.func, React.PropTypes.shape({ current: React.PropTypes.elementType })]) React ref that should be set on the carousel element
initialSlideHeight React.PropTypes.number Initial height of the slides in pixels. 100
initialSlideWidth React.PropTypes.number Initial width of the slides in pixels
pauseOnHover React.PropTypes.bool Pause autoPlay when mouse is over carousel. true
renderAnnounceSlideMessage React.PropTypes.func Renders message in the ARIA live region that is announcing the current slide on slide change Render function that returns "Slide {currentSlide + 1} of {slideCount}"
scrollMode React.PropTypes.oneOf(['page', 'remainder']) When scrollMode is set to remainder, the carousel will only scroll the amount of slides necessary without showing blank slides. If scrollMode is set to page then slidesToScroll will equal slidesToShow and the final page may contain blank slides. remainder
slideIndex React.PropTypes.number Manually set the index of the slide to be shown
slideOffset React.PropTypes.number While using prop animation = "zoom", you can configure space around current slide with slideOffset. 25
slidesToScroll React.PropTypes.oneOfType([ React.PropTypes.number, React.PropTypes.oneOf(['auto'])]) Slides to scroll at once. Set to "auto" to always scroll the current number of visible slides. Is overridden to slidesToShow when transitionMode="fade"
slidesToShow React.PropTypes.number Number of slides to show at once. Will be cast to an integer when transitionMode="fade"
slideWidth React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]) Manually set slideWidth. If you want hard pixel widths, use a string like slideWidth="20px", and if you prefer a percentage of the container, use a decimal integer like slideWidth={0.8}
speed React.PropTypes.number Animation duration/Transition speed in milliseconds
swiping React.PropTypes.bool Enable touch swipe/dragging true
transitionMode React.PropTypes.oneOf(['scroll', 'fade', 'scroll3d']) Set the way slides transition from one to the next. scroll
vertical React.PropTypes.bool Enable the slides to transition vertically
width React.PropTypes.string Used to hardcode the slider width. Accepts any string dimension value such as "80%" or "500px"
withoutControls React.PropTypes.bool Used to remove all controls at once. Overwrites the render[Top, Right, Bottom, Left]CenterControls(). false
wrapAround React.PropTypes.bool Sets infinite wrapAround mode. An option similar to repeat or infinite in other libs. false
zoomScale React.PropTypes.number Adds a number value to set the scale of zoom when animation === "zoom". The number value should be set in a range of (0,1). The default value is set to zoomScale: 0.85
opacityScale React.PropTypes.number Adds a number value to set the scale of the opacity for the 'scroll3d' transition mode. The number value should be set in a range of (0,1). The default value is set to opacityScale: 0.65
onDragStart React.PropTypes.func Adds a callback to capture event at the start of swiping/dragging slides

render*Controls

React.PropTypes.func

A set of eight render props for rendering controls in different positions around the carousel.

  • Valid render props for the eight positions are renderTopLeftControls, renderTopCenterControls, renderTopRightControls, renderCenterLeftControls, renderCenterCenterControls, renderCenterRightControls, renderBottomLeftControls, renderBottomCenterControls, and renderBottomRightControls.

  • The default props are set as renderCenterLeftControls for Previous button, renderCenterRightControls for the Next button and renderBottomCenterControls for the "Paging dots". To change the position or remove "Paging dots", the default positions need to be disabled by setting them to null.

<Carousel
  renderTopCenterControls={({ currentSlide }) => (
    <div>Slide: {currentSlide}</div>
  )}
  renderCenterLeftControls={({ previousSlide }) => (
    <button onClick={previousSlide}>Previous</button>
  )}
  renderCenterRightControls={({ nextSlide }) => (
    <button onClick={nextSlide}>Next</button>
  )}
>
  {/* Carousel Content */}
</Carousel>
  • The function returns the props for goToSlide, nextSlide and previousSlide functions, in addition to slideCount and currentSlide values. You can also remove all render controls using withoutControls.

  • NOTE: The className slide-visible is added to the currently visible slide or slides (when slidesToShow > 1). The className slide-current is added to the currently "active" slide.

renderAnnounceSlideMessage

React.PropTypes.func

renderAnnounceSlideMessage render prop is a special case of the render*Controls props. It's responsibility is to render ARIA live announcement message to improve accessibility. The prop will announce the message you pass in every time the slide changes with VoiceOver enabled on your machine. The function returns only slideCount and currentSlide values.

<Carousel
  renderAnnounceSlideMessage={({ currentSlide, slideCount }) =>
    `Slide ${currentSlide + 1} of ${slideCount}`
  }
>
  {/* Carousel Content */}
</Carousel>

getControlsContainerStyles

React.PropTypes.func

getControlsContainerStyles is a function prop that will be called with a key argument being one of the following: TopLeft | TopCenter | TopRight | CenterLeft | CenterCenter | CenterRight | BottomLeft | BottomCenter | BottomRight. The function will then return CSS Properties.

<Carousel
  getControlsContainerStyles={(key) => {
     switch (key) {
        case 'TopLeft':
          return {
            backgroundColor: "red",
          };
        default:
          // will apply all other keys
          return {
            backgroundColor: "blue",
          };
      }
  }} />
>
  {/* Carousel Content */}
</Carousel>

defaultControlsConfig

React.PropTypes.shape({
  nextButtonClassName: PropTypes.string,
  nextButtonStyle: PropTypes.object,
  nextButtonText: PropTypes.string,
  prevButtonClassName: PropTypes.string,
  prevButtonStyle: PropTypes.object,
  prevButtonText: PropTypes.string,
  pagingDotsContainerClassName: PropTypes.string,
  pagingDotsClassName: PropTypes.string,
  pagingDotsStyle: PropTypes.object
})

The default controls used by Nuka are the Previous button, Next button, and PagingDots control. The visual look and text of these controls can be modified with props as described below:

  • The props ending with ClassName let you apply a custom css class to its respective control.
  • The props ending with Style let you apply inline styles to its respective control.
  • The text label for the Previous button and Next button can be customized using prevButtonText and nextButtonText, respectively.

For example, you can change the text of the Previous and Next buttons, and change the paging dots to red by passing in the following configuration:

defaultControlsConfig={{
  nextButtonText: 'Custom Next',
  prevButtonText: 'Custom Prev',
  pagingDotsStyle: {
    fill: 'red'
  }
}}

External Control of Carousel State

You can control the state of the carousel from your parent component as shown below:

import React from 'react';
import Carousel from 'nuka-carousel';

export default class extends React.Component {
  state = {
    slideIndex: 0
  };

  render() {
    return (
      <Carousel
        slideIndex={this.state.slideIndex}
        afterSlide={slideIndex => this.setState({ slideIndex })}
      >
        <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide1" />
        <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide2" />
        <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide3" />
        <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide4" />
        <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide5" />
        <img src="https://via.placeholder.com/400/ffffff/c0392b/&text=slide6" />
      </Carousel>
    );
  }
}

TypeScript

TypeScript type definitions are now shipped with nuka-carousel. You can use them directly from the library.

Resizing Height

How resizing works

In componentDidMount, the initial dimensions are assigned to each slide:

  • Width: initialSlideWidth || slideWidth || (slidesToShow / width of container)
  • Height: initialSlideHeight

After the component completes mounting with the accurate width, it tries to calculate the desired height of the content (current, first, max). If that calculation fails (perhaps because slide images are still loading), it'll wait a bit and try again. Once successful, that measurement then replaces initialSlideHeight with the measured height in pixels.

Contributing

See the Contribution Docs.

Maintenance Status

Active: Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.

Comments
  • Slides sometimes render with zero height

    Slides sometimes render with zero height

    I'm testing out 2.0.0 via the master branch, and seeing a new issue where slides will sometimes render with zero height. This is unrelated to/not fixed by commit 5ed9ff5. Resizing my browser window adds height to the slides instantly. I added this code to setDimensions, which fixes it for the most part:

    if (firstSlide.offsetHeight === 0) {
       var width = window.innerWidth;
       firstSlide.style.width = width + 'px';
       firstSlide.style.height = (width/2.4) + 'px'; //known ratio for my images - needed for Safari
    }
    

    I'm not submitting this as a PR right now because it feels a bit hacky and istied to my external CSS and image ratio. Is anyone else experiencing this? Is there a cleaner solution?

    This isn't an issue on ^1.2.0.

    Unverified 
    opened by aczerepinski 39
  • Slide Height Issues On Load

    Slide Height Issues On Load

    This is similar to #219 - but the slider height collapses on load (is 0px), but if the browser window is resized at all the slider then snaps to the correct height. Example on CodeSandbox.

    Any thoughts on how to fix or get around this? I'd like to let the slider height by default be the largest slide.

    Unverified Needs: Investigation 
    opened by erwstout 35
  • nuka-carousel doesn't work.

    nuka-carousel doesn't work.

    Nuka-Carousel doesn't work following error.

    TypeError: Cannot read property 'childNodes' of undefined at Carousel.getChildNodes

    Could you let me know how to solve this issue?

    Unverified 
    opened by webdevboy 29
  • Initial height is broken

    Initial height is broken

    Describe Your Environment

    • What version of nuka-carousel are you using? latest
    • What version of React are you using? latest
    • What browser are you using? chrome
    • What machine are you on? linux

    Describe the Problem

    Expected behavior: [What you expect to happen] That the initial height is the first (or the tallest) image's height Actual behavior: [What actually happens] No matter what I set, the initial height is 100px Example: Edit o58601znvq

    Additional Information

    I wrote about this at the issue #413 but I move it into a new issue for clearance.

    When the carousel first loads, it is only 100px high, no matter what I set where. Changing to the next slide, or resizing the window, everything snaps into place, and the height becomes the image's height as it is supposed to be.

    Needs: Investigation 
    opened by balazsorban44 28
  • Flash after wrap around

    Flash after wrap around

    • nuka-carousel: ^4.4.7
    • react: ^16.7.0, react-dom: ^16.7.0
    • Chrome Version 71.0.3578.98
    • Surface Book 2

    ##Problem

    https://codesandbox.io/s/3r8110mwlp

    Expected behavior: Carousel goes slide 1 ,slide 2 , slide 3, slide 1 seamlessly Actual behavior: After slide 3, carousel returns to slide 1 but flashes

    Additional Information

    Looks like slide 1 goes to -4500px and jumps to 0px when performing the wrap around

    Type: Bug Verified 
    opened by ghost 20
  • Slide Height

    Slide Height

    It seems like as if the height of the slide is the height of the largest slide. Is there a way to specify the slide's height? Or an option in props we can set so all of the slides conform to the height of its contents? Otherwise, I'd like to request such an option.

    Unverified 
    opened by nmkim8 19
  • With cell align 'center' the last image is not displayed centered.

    With cell align 'center' the last image is not displayed centered.

    Bugs and Questions

    Prerequisites

    Feel free to delete this section if you have checked off all of the following.

    • [X] I've searched open issues to make sure I'm not opening a duplicate issue
    • [X] I have read through the docs before asking a question
    • [X] I am using the latest version of nuka-carousel

    Describe Your Environment

    CodeSandbox (your playground) with nuka 4.7.7

    Describe the Problem

    With cell align 'center' the last image is not displayed centered. Open Sandbox below, and click "next" until third image should be selected.

    Expected behavior: last image is centered Actual behavior: last image is displayed right

    https://codesandbox.io/s/sad-mestorf-geg5o?file=/src/index.js

    code:

    import Carousel from "nuka-carousel";
    import ReactDom from "react-dom";
    
    const colors = ["7732bb", "047cc0", "00884b", "e3bc13", "db7c00"];
    // eslint-disable-next-line complexity
    const App = () => {
      const slides = colors.slice(0, 3).map((color, index) => (
        <img
          src={`https://via.placeholder.com/400/${color}/ffffff/&text=slide${
            index + 1
          }`}
          alt={`Slide ${index + 1}`}
          key={color}
          style={{
            width: "100px",
            height: "200px"
          }}
        />
      ));
    
      return (
        <>
          <div style={{ width: "100%", margin: "auto" }}>
            <h2 style={{ textAlign: "center" }}>Nuka Carousel Demo</h2>
            <Carousel slideWidth="120px" cellAlign="center">
              {slides}
            </Carousel>
          </div>
        </>
      );
    };
    
    ReactDom.render(<App />, document.getElementById("root"));
    
    v5 
    opened by peak3d 18
  • Miscalculation of width or height on first paint until there is resize event

    Miscalculation of width or height on first paint until there is resize event

    Bug

    Prerequisites

    Feel free to delete this section if you have checked off all of the following.

    • [x] I've searched open issues to make sure I'm not opening a duplicate issue : related to https://github.com/FormidableLabs/nuka-carousel/issues/349
    • [x] I have read through the docs before asking a question
    • [x] I am using the latest version of nuka-carousel

    Describe Your Environment

    • What version of nuka-carousel are you using? latest
    • What version of React are you using? latest
    • What browser are you using? chrome
    • What machine are you on? windoes

    Describe the Problem

    The width or height are miscalculated on first paint until there is resize event : https://codesandbox.io/s/xpz69xnx94

    just using the following code:

        <Carousel>
          <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide1" />
          <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide2" />
          <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide3" />
          <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide4" />
          <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide5" />
          <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide6" />
        </Carousel>
    

    bug

    If i run window.dispatchEvent(new Event("resize")); on the console, it will display correctly

    high priority 
    opened by stunaz 18
  • Feature: adaptive height

    Feature: adaptive height

    Updated ticket

    • [x] ~~Get adaptive height in 3.x branch~~ (fixed in #291)
    • [x] Get adaptive height port of #291 into master branch after #293 lands.

    Arunesh's Original Description

    please check these pr's and merge them which one is appropriate

    https://github.com/FormidableLabs/nuka-carousel/pulls?utf8=%E2%9C%93&q=is%3Apr+is%3Aopen+height

    Currently slick supports adaptive height but NUKA does not.

    cc @kenwheeler @ryan-roemer

    Type: Enhancement high priority 
    opened by ajoshi0 18
  • Varying height slides seems broken

    Varying height slides seems broken

    Hi,

    When you have a look at the demo, or even by looking at the code, it seems that the sliderHeight is never actually applied to slides. How is this feature supposed to work ?

    Thanks !

    Unverified 
    opened by moimael 16
  • Nuka is miscalculating width

    Nuka is miscalculating width

    I am currently using the last version, however, I've been having this same problem since many versions ago.

    I simply have something like this:

     <NukaCarousel
            autoplay
            dragging
            wrapAround
            renderCenterLeftControls={LeftArrow }
            renderCenterRightControls={RightArrow}
            renderBottomCenterControls={Indicators}
          >
            {banner.images.map(url => <img key={url} src={url} />)}
     </NukaCarousel>
    

    If I only have an image on my array, it's fine. But if I have > 1, somehow Nuka miscalculates its own size and I end up with a huge carousel, creating an enormous width on my page, breaking everything.

    EDIT: If I use vertical={true}, its size is correctly calculated.

    Any help on this? Thank you!

    Unverified 
    opened by Deniscapp 14
  • chore(deps): bump json5 from 1.0.1 to 1.0.2 in /examples/nextjs

    chore(deps): bump json5 from 1.0.1 to 1.0.2 in /examples/nextjs

    Bumps json5 from 1.0.1 to 1.0.2.

    Release notes

    Sourced from json5's releases.

    v1.0.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295). This has been backported to v1. (#298)
    Changelog

    Sourced from json5's changelog.

    Unreleased [code, diff]

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0 [code, diff]

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)

    v2.1.3 [code, diff]

    • Fix: An out of memory bug when parsing numbers has been fixed. (#228, #229)

    v2.1.2 [code, diff]

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Fix: use forwardref for nullability

    Fix: use forwardref for nullability

    Description

    This PR is for "[v6] Expand ref type, use React.forwardRef #969". Wrapped carousel component with React.forwardRef and replaced innerRef prop with a native-to-React ref prop.

    Fixes # 969 (issue)

    Type of Change

    • [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
    • [ ] This change requires a documentation update

    How Has This Been Tested?

    Checklist

    • [x] My code follows the style guidelines of this project (I have run pnpm run lint)
    • [ ] I have added tests that prove my fix is effective or that my feature works
    • [x] New and existing unit tests pass locally with my changes (I have run pnpm run test:ci-with-server/pnpm run test)
    • [x] I have performed a self-review of my own code
    • [ ] I have commented my code, particularly in hard-to-understand areas
    • [ ] I have made corresponding changes to the documentation
    • [x] I have recorded any user-facing fixes or changes with pnpm changeset.
    • [x] My changes generate no new warnings
    • [ ] Any dependent changes have been merged and published in downstream modules
    opened by JeehyaeDance 2
  • Controlled Carousel using afterSlide and slideIndex results in infinite loop

    Controlled Carousel using afterSlide and slideIndex results in infinite loop

    This was closed in #416 - but still there in latest.

    ###Recreating issue Sandbox with behavior

    https://codesandbox.io/s/inspiring-nightingale-6felod?file=/src/App.js

    Am using the latest Nuka 5.4, React 18.2

    Describe the Problem

    Controlled Carousel ends up in an infinite loop if the "next" and "prev" buttons are clicked really fast.

    opened by panigrah 1
  • useRef is returning undefined for nuka-Carousel

    useRef is returning undefined for nuka-Carousel

    How To use UseRef In nuka-carousel element to retrieve the default Properties.

    I have an Array of Products Which contains an Array of images. When I onMouseEnter a Respective Product Autopay Should Star, onMouseLeft respective AutoPlay Should Stop.

    I have Used a useRef but it's returning Undifined.

    can Some Please Help me Achieve this.

    image image Screenshot 2022-10-09 at 1 36 21 AM

    Thanks

    opened by niteshreddy6690 0
  • failed to parse source map from 'E:\merit\node_modules\nuka-carousel\src\announce-slide.tsx'

    failed to parse source map from 'E:\merit\node_modules\nuka-carousel\src\announce-slide.tsx'

    Bugs and Questions

    Prerequisites

    • [x] I've searched open issues to make sure I'm not opening a duplicate issue
    • [x] I have read through the docs before asking a question
    • [x] I am using the latest version of nuka-carousel

    Describe Your Environment

    • What version of nuka-carousel are you using?
    • What version of React are you using?
    • What browser are you using?

    Describe the Problem

    WARNING in ./node_modules/nuka-carousel/lib/announce-slide.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'E:\merit\node_modules\nuka-carousel\src\announce-slide.tsx' file: Error: ENOENT: no such file or directory, open 'E:\merit\node_modules\nuka-carousel\src\announce-slide.tsx'

    WARNING in ./node_modules/nuka-carousel/lib/carousel.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'E:\merit\node_modules\nuka-carousel\src\carousel.tsx' file: Error: ENOENT: no such file or directory, open 'E:\merit\node_modules\nuka-carousel\src\carousel.tsx'

    WARNING in ./node_modules/nuka-carousel/lib/control-styles.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'E:\merit\node_modules\nuka-carousel\src\control-styles.ts' file: Error: ENOENT: no such file or directory, open 'E:\merit\node_modules\nuka-carousel\src\control-styles.ts'

    WARNING in ./node_modules/nuka-carousel/lib/controls.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'E:\merit\node_modules\nuka-carousel\src\controls.tsx' file: Error: ENOENT: no such file or directory, open 'E:\merit\node_modules\nuka-carousel\src\controls.tsx'

    WARNING in ./node_modules/nuka-carousel/lib/default-carousel-props.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'E:\merit\node_modules\nuka-carousel\src\default-carousel-props.tsx' file: Error: ENOENT: no such file or directory, open 'E:\merit\node_modules\nuka-carousel\src\default-carousel-props.tsx'

    WARNING in ./node_modules/nuka-carousel/lib/default-controls.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'E:\merit\node_modules\nuka-carousel\src\default-controls.tsx' file: Error: ENOENT: no such file or directory, open 'E:\merit\node_modules\nuka-carousel\src\default-controls.tsx'

    WARNING in ./node_modules/nuka-carousel/lib/hooks/use-frame-height.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'E:\merit\node_modules\nuka-carousel\src\hooks\use-frame-height.ts' file: Error: ENOENT: no such file or directory, open 'E:\merit\node_modules\nuka-carousel\src\hooks\use-frame-height.ts'

    WARNING in ./node_modules/nuka-carousel/lib/hooks/use-state-with-ref.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'E:\merit\node_modules\nuka-carousel\src\hooks\use-state-with-ref.ts' file: Error: ENOENT: no such file or directory, open 'E:\merit\node_modules\nuka-carousel\src\hooks\use-state-with-ref.ts'

    WARNING in ./node_modules/nuka-carousel/lib/hooks/use-tween.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'E:\merit\node_modules\nuka-carousel\src\hooks\use-tween.ts' file: Error: ENOENT: no such file or directory, open 'E:\merit\node_modules\nuka-carousel\src\hooks\use-tween.ts'

    WARNING in ./node_modules/nuka-carousel/lib/slide.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'E:\merit\node_modules\nuka-carousel\src\slide.tsx' file: Error: ENOENT: no such file or directory, open 'E:\merit\node_modules\nuka-carousel\src\slide.tsx'

    WARNING in ./node_modules/nuka-carousel/lib/slider-list.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'E:\merit\node_modules\nuka-carousel\src\slider-list.tsx' file: Error: ENOENT: no such file or directory, open 'E:\merit\node_modules\nuka-carousel\src\slider-list.tsx'

    WARNING in ./node_modules/nuka-carousel/lib/types.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'E:\merit\node_modules\nuka-carousel\src\types.ts' file: Error: ENOENT: no such file or directory, open 'E:\merit\node_modules\nuka-carousel\src\types.ts'

    WARNING in ./node_modules/nuka-carousel/lib/utils.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'E:\merit\node_modules\nuka-carousel\src\utils.ts' file: Error: ENOENT: no such file or directory, open 'E:\merit\node_modules\nuka-carousel\src\utils.ts'

    Expected behavior:

    Actual behavior

    Additional Information

    opened by MrHumble21 2
  • [v6] Expand ref type, use React.forwardRef

    [v6] Expand ref type, use React.forwardRef

    The prop innerRef does not allow the ref to point to a null value, even though that is the unavoidable initial value prior to first render. This will require library users to jump through some TypeScript hoops to make sure they can pass their ref to innerRef. https://github.com/FormidableLabs/nuka-carousel/blob/df842370ff3cc1b4f95d6171a2998c31a608da0d/packages/nuka/src/types.ts#L330

    One option is to convert the innerRef prop to a native-to-React ref prop by wrapping the carousel function in React.forwardRef, which, given the right element type, will factor in the nullability of the ref.

    We could alternatively retain the innerRef and just expand the type, so we would be free to set a collection of imperative APIs ( e.g., MyCarousel.nextSlide(), MyCarousel.goToSlide(), etc) to the native ref via useImperativeHandle, though I feel like our existing API gives enough flexibility that the extra API surface would only cause confusion.

    This is a v6 issue because renaming the prop would break people's code, and expanding the type could, too. For example, TypeScript code that has no null checks before calling something like myCarouselInnerRef.current.getBoundingClientRect() would suddenly start to get a type error about getBoundingClientRect not existing on null.

    v6 
    opened by fritz-c 0
  • [email protected](Nov 15, 2022)

    Patch Changes

    • slider-frame is no longer a focus target if enableKeyboardControls is false (#984)

    • fix the Alignment type so library users don't need to import an enum for a simple value (#974)

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Sep 22, 2022)

    Minor Changes

    • add onUserNavigation prop to listen for user-triggered navigation (#970)

    • allow for any element or component in the nextButtonText and prevButtonText props, instead of just strings (#970)

    • pass nextDisabled, previousDisabled, and pagingDotsIndices to render*Controls callbacks to aid in the creation of custom controls (#966)

    • adds the ability to use custom easing functions for the animations via easing and edgeEasing (#959)

    • add props to enable users to hook into interactions with the default carousel controls (#970)

    Patch Changes

    • animation=fade now behaves as it did pre-5.3.0, scrolling all visible slides at once (#959)

    • make the control dots change in size when dimensions changed via CSS (#964)

    • Applies draggable=false only to children of sliderList, not entire document (#972)

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Aug 23, 2022)

    Minor Changes

    • makes it possible to swipe over multiple slides at once rather than being limited to one (#956)

    Patch Changes

    • Fix autoplay timing so the interval is not extended occasionally when wrapAround=true (#954)

    • make the prev/next buttons jump to appropriate indices with cellAlign=center|right (#952)

    • keyboard-triggered "firstSlide" or "lastSlide" actions are now animated, and now take cellAlign into account (#958)

    • make autoplay continue to the last slide when cellAlign != left and slidesToShow > 1 (#952)

    • children of Carousel that are falsy will not be rendered as slides (#953)

    • fix missing slide-visible classes when slideIndex has fractional digits (#947)

    • correct button disabling when cellAlign=center|right (#952)

    • show a dot corresponding to the last slide when cellAlign=center|right (#952)

    • fixes number of dots in default controls and eliminates janky animation when changing slides rapidly (#945)

    • setting "dragging" to false will no longer disable carousel swiping on mobile ("swiping" does that) (#956)

    • keyboard interactions when focused on the carousel are now kept from bubbling up and triggering other listeners (#958)

    • fix initial index when autoplayReverse=true and cellAlign is not left (#952)

    Source code(tar.gz)
    Source code(zip)
  • v4.8.3(Nov 19, 2021)

  • v4.8.1(Oct 22, 2021)

    Thank you @hsource for contributing to Nuka and submitting this fix!

    • #804 Fix: flip inequality check in initializeCarouselHeight
    • #805 Fix: prevent initializeCarouselHeight loop to fix browser crash
    Source code(tar.gz)
    Source code(zip)
  • v4.8.0(Sep 21, 2021)

  • v4.7.9(Jul 13, 2021)

  • v4.7.6(Mar 15, 2021)

  • v4.7.5(Dec 30, 2020)

    • #746 Fixes #705 - allow peeking slides when slide count is less than 3, and using Zoom animation
    • #747 Set proper offset on first render for slider-list
    • #750 Fixes #749 - Updates to setDimensions method to fix video height bug
    Source code(tar.gz)
    Source code(zip)
  • v4.7.4(Dec 1, 2020)

    • #745 Add transition when heightMode is set to 'current' (Thanks @acharyakavita!) Fixes #721

    • #742 ariaProps should not override child props values (Thank you, @halitogunc!) Fixes #741

    • #739 Fix non-clickable slides and several bugs in paging dots display (Another big "thank you" to @acharyakavita!) Fixes #725

    Source code(tar.gz)
    Source code(zip)
  • v4.7.3(Nov 25, 2020)

  • v4.7.2(Oct 30, 2020)

  • v4.7.1(Sep 10, 2020)

    • #706 Add a more descriptive explanation about wrapAround
    • #707 Push fresh yarn.lock
    • #716 Update types for missing slideOffset, zoomScale
    • #717 fixes #709 - Carousel collapsing with certain prop config
    • #723 Cleanup dev dependencies, fix vulnerabilities, eslint fixes
    • #698, #714, #722 Dependency bumps
    Source code(tar.gz)
    Source code(zip)
  • v4.6.7(Apr 23, 2020)

    Thanks to all the contributors for helping with this release, and many others!

    • #687 Fix Edge issue (Thank you @apotap2!)
    • #683 Rename param of afterSlide callback (Thanks, @stevenjob!)
    • #680 Fixes bug #586 - changing slide too quickly doesn't behave as expected (Thanks, @sachinmour!)
    • #677 Update incorrect prop getControlsContainerStyle (Thank you, @mnstrsound!)
    Source code(tar.gz)
    Source code(zip)
  • v4.6.6(Mar 17, 2020)

  • v4.6.5(Mar 5, 2020)

  • v4.6.4(Mar 5, 2020)

    • #672 Add innerRef to type definitions
    • #671 Add innerRef prop Thank you for these two, @jkrehm ☝️
    • #670 Add scrollMode prop (Thanks, @mariano-formidable! 🤗)
    • #669 Fix getControlsContainerStyle prop name type in type definitions (Thank you, @ahutchings! 🎉 )
    • #668 Fix edge swipe bug (@mariano-formidable 🎉)
    • #666 Add ability to drag to scroll multiple slides (Thanks to @amphithere and @mariano-formidable for this one! 💯)
    Source code(tar.gz)
    Source code(zip)
  • v4.6.3(Feb 12, 2020)

  • v4.6.2(Feb 12, 2020)

    • #656, #655, #653 Minor clean up and fixes - update demo to use hooks, add demo title, fix slidesToScroll typing, cleaning up prop names, minor perf improvement
    • #652 fix: add missing type annotation
    • #651 Fix typo
    • #650 Change touchAction for fade-transition to pinch-zoom
    • #648 Add autoplay toggle to demo
    • #647 Prevent fade and fadeFromSlide from reaching/equalling slideCount to solve opacity issue
    • #645 Prevent swipe logic from taking over when no swipe was made
    • #644 Add prop to allow for customization of defaultControls elements
    • #643 Slides that are not fully visible cannot receive focus
    • #639 Keyboard controls will only work when keyboard is in focus
    Source code(tar.gz)
    Source code(zip)
  • v4.6.1(Jan 20, 2020)

    Huge help from @mariano-formidable for this release - Thank you!!

    • #632 Dependency vulnerability fixed, upgrade handlebars from 4.1.2 to 4.5.3
    • #633 Fixes #618 max (and first) height mode calculations
    • #635 Fixes #494 Updates scroll transition logic to fix wraparound flash
    • #636 Fixes #503 updates logic so Next button enables/disables correctly
    • #638 Fixes #531 styling issue in Demo and some minor cleanup of the code
    Source code(tar.gz)
    Source code(zip)
  • v4.6.0(Dec 17, 2019)

    • Fixes for leftAlign added for heightMode="current" and heightMode="max"
    • #614 Remove getListItemStyles() from type definitions (Thanks @esetnik)
    • #619 Configure keyboard keyCodes so default ones can be overridden (thank you @mtsandeep)
    • #620 Avoid redundant dimension calculations after a DOM mutation (thank you @Sidnioulz)
    • #621 Add TS definition for renderAnnounceSlideMessage (thanks @michaelgt04)
    • #625 Fixes Issue 521: Initial height calculations will be repeated until successful. (thank you, @mariano-formidable)
    • #626 Height mode 'current' uses tallest visible slide (thank you @mariano-formidable)
    • #628 Adding missing Type For keyCodeConfig prop (thanks, @mtsandeep)
    Source code(tar.gz)
    Source code(zip)
  • v4.5.13(Nov 8, 2019)

    • #592 change componentWillReceiveProps to UNSAFE_componentWillReceiveProps (thank you @luispeerez!)
    • #600 Fix wraparound logic to account for cellAlign property (thank you @dbangerter2!)
    • #601 Change dot styling (thank you @thomasvaeth!)
    • #608 Fix dragging issue in Safari
    • #609 Prevent scroll when dragging on iOS (Thanks @Lopliok!)
    Source code(tar.gz)
    Source code(zip)
  • v4.5.12(Nov 8, 2019)

    • #582 Another attempt to fix the height issue by changing the default prop value for height
    • #584 Fix multi-slide wraparound (Thanks @dbangerter2!)
    • #585 Fix onDragStart, should only happen with dragging/swiping (Thanks @jflayhart!)
    • #588 Impossible to select last images when swiping, this fixes that (Thanks @gonzadk!)
    Source code(tar.gz)
    Source code(zip)
  • v4.5.11(Sep 3, 2019)

    in 4.5.10 and 4.5.11 several issues have been resolved and updates have been made to account for dependency vulnerability.

    • #578 update vulnerable deps, fix broken scroll animation
    • #576 Clear timeouts when component unmounts to prevent memory leak
    • #574 Add event param to onDragStart method
    • #573 Fix resizing height issue due to dynamically loaded elements and readyStateChange issues
    • #572 Fix Travis configuration
    • #571 Next and Previous buttons should not be submit type buttons
    • #565 Add missing controls to the TypeScript library definition
    • #564 Export NextButton, PreviousButton, PagingDots from main entry point to allow for easier style targeting
    • #562 Allow isEdgeSwiping to work with vertical slider
    • #561 Avoid the empty div wrapper for null custom controls
    Source code(tar.gz)
    Source code(zip)
  • v4.5.8(May 24, 2019)

    • #551 Adds a disableEdgeSwiping prop to disable white space on last and first slide when swiping - thanks @maurispalletti
    • #549 Add type=button to paging dots, thank you @kaitlynbrown
    Source code(tar.gz)
    Source code(zip)
  • v4.5.5(May 7, 2019)

  • v4.5.3(Mar 18, 2019)

  • v4.5.1(Mar 6, 2019)

  • v4.4.8(Feb 12, 2019)

    • #501 Add cellAlign type to CarouselSlideRenderControlProps interface (thanks @formatlos)
    • #500 Animation performance enhancements (@sghall thanks!)
    • #496 Upgrade react-move (also thanks to @sghall)
    • #492 Fix Paging Dots sync, fix 'Next' button validation
    • #490 Disable animation for an initial slide when non-default slideIndex prop is passed
    • #489 Disable animation prop created
    • #488 Configurable zoom scale prop
    • #487 updates to README
    Source code(tar.gz)
    Source code(zip)
Owner
Formidable
We design and develop web apps, train engineers at startups and Fortune 500 companies, and improve the modern web with open source software.
Formidable
A pure extendable React carousel, powered by Brainhub (craftsmen who ❤️ JS)

react-carousel A pure extendable React carousel, powered by Brainhub (craftsmen who ❤️ JS) Live code demo | v1 migration guide | Hire us Table of Cont

Brainhub 1k Dec 28, 2022
React image carousel is a React component for building image galleries and carousels

React image carousel is a React component for building image galleries and carousels

ChingChing Yeh 13 May 25, 2022
React carousel component

react-slick Carousel component built with React. It is a react port of slick carousel Documentation Installation npm npm install react-slick --save ya

Kiran Abburi 10.8k Jan 2, 2023
Custom React hook for building an accessible Carousel component.

Build an accessible React Carousel component with usePony

João Viana 7 Jul 22, 2022
Lightweight carousel component for react

Lightweight carousel component for react

Trendyol Open Source 217 Dec 30, 2022
Touch and drag slider carousel component for React

react-touch-drag-slider Touch and drag slider carousel component for React Touch friendly on mobile Responsive to viewport resizing Supports mouse dra

Will Adams 184 Dec 22, 2022
A react carousel/slider like component for sequentially displaying slides or sets of slides

react-whirligig demo repo A carousel/slider-like component for sequentially displaying slides or sets of slides. Basic Usage const Slider = ({ slideIn

Jane 24 Aug 3, 2022
Minimal carousel component for React.

re-carousel Minimal carousel component for React. demo: https://amio.github.io/re-carousel/ Usage import Carousel from 're-carousel' then: <Carousel a

Amio Jin 261 Dec 23, 2022
Simple multifunctional controlled react.js carousel component. Touch enabled, responsive, infinite, with autoplay support. (with ssr support)

react-simply-carousel Simple && small controlled React.js carousel component (touch enabled, infnite and responsive) Table of contents Installation Us

Vadym Shymko 72 Jan 6, 2023
A flexible and responsive carousel component for react

react-elastic-carousel A flexible and responsive carousel component for react Why do we need yet another carousel component Element resize support (tr

Sagiv ben giat 303 Dec 31, 2022
Simple and lightweight carousel component for React applications

Carousel Simple - rcdev Componente de carousel simples e leve para aplicativos React. Demonstração Instalação npm npm install carousel-react-rcdev y

Rian Carlos 6 Aug 13, 2022
An infinitely scrollable, touch enabled, 3D, image carousel component which can be used in a React application

React Round Carousel An infinitely scrollable 3D carousel component for React This is an infinitely scrollable, touch enabled, 3D, image carousel comp

Atanas Atanasov 7 Dec 28, 2022
Easy to use and TypeScript compatible carousel component

Carousel Component for React Easy to use and TypeScript compatible carousel component. Installation To install the library you can run npm install @se

Sefa İlyas Öz 6 Oct 13, 2022
React.js Responsive Carousel (with Swipe)

React Responsive Carousel Powerful, lightweight and fully customizable carousel component for React apps. Important I don't have any time available to

Leandro Lemos 2.3k Jan 4, 2023
Rerousel is the simplest and the lightest infinite carousel package made for React.

Rerousel is the simplest and the lightest infinite carousel package made for React. Simple Set up your carousel in the blink of an eye. You only have

Aexol 108 Dec 23, 2022
Items Carousel Built with react-motion and styled-components

react-items-carousel Installation $ npm install react-items-carousel --save Demos Example import React, { useState } from 'react'; import ItemsCarous

Kareem Elbahrawy 204 Dec 24, 2022
React simple infinite carousel with lazy loading and responsive support

react-leaf-carousel React simple infinite carousel with lazy loading and responsive support. Installation npm install react-leaf-carousel Example impo

Leaf Grow 115 Dec 12, 2022