npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mdfe/nuka-carousel

v3.0.1

Published

Pure React Carousel

Downloads

5

Readme

nuka-carousel

A Pure ReactJS Carousel Component

http://i.imgur.com/UwP5gle.gif

Install

npm install nuka-carousel

Example

'use strict';

var React = require('react');
var createReactClass = require('create-react-class');

var Carousel = require('nuka-carousel');

const App = createReactClass({
  mixins: [Carousel.ControllerMixin],
  render() {
    return (
      <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>
    )
  }
});

module.exports = App;

Running demo locally

The demo can be launched on local machine via webpack-dev-server. Run the following:

// if webpack-dev-server is not installed globally
./node_modules/.bin/webpack-dev-server

Now, you can access the application on your localhost at following url: Demo

Props

afterSlide

React.PropTypes.func

Hook to be called after a slide is changed.

autoplay

React.PropTypes.bool

Autoplay mode active. Defaults to false.

autoplayInterval

React.PropTypes.number

Interval for autoplay iteration. Defaults to 3000.

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.

cellSpacing

React.PropTypes.number

Space between slides, as an integer, but reflected as px

data

React.PropTypes.func

Used with the ControllerMixin to add carousel data to parent state.

decorators

React.PropTypes.array

An array of objects that supply internal carousel controls. Decorator objects have component, position & style properties. component takes a React component, position takes a predefined position string and style takes an object of styles to be applied to the decorator. See an example below:

var Decorators = [{
  component: createReactClass({
    render() {
      return (
        <button
          onClick={this.props.previousSlide}>
          Previous Slide
        </button>
      )
    }
  }),
  position: 'CenterLeft',
  style: {
    padding: 20
  }
}];

// Valid position properties are TopLeft, TopCenter, TopRight
// CenterLeft, CenterCenter, CenterRight, BottomLeft, BottomCenter
// and BottomRight

dragging

React.PropTypes.bool

Enable mouse swipe/dragging

easing

React.PropTypes.string

Animation easing function. See valid easings here: https://github.com/chenglou/tween-functions

framePadding

React.PropTypes.string

Used to set the margin of the slider frame. Accepts any string dimension value such as "0px 20px" or "500px".

frameOverflow

React.PropTypes.string

Used to set overflow style property on slider frame. Defaults to hidden.

edgeEasing

React.PropTypes.string

Animation easing function when swipe exceeds edge. See valid easings here: https://github.com/chenglou/tween-functions

initialSlideHeight

React.PropTypes.number

Initial height of the slides in pixels.

initialSlideWidth

React.PropTypes.number

Initial width of the slides in pixels.

slideIndex

React.PropTypes.number

Manually set the index of the slide to be shown.

slidesToShow

React.PropTypes.number

Slides to show at once.

slidesToScroll

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.

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.

swiping

React.PropTypes.bool

Enable touch swipe/dragging

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".

wrapAround

React.PropTypes.bool

Sets infinite wrapAround mode. Defaults to false

ControllerMixin

The ControllerMixin provides a way to add external controllers for a carousel. To use the controller mixin, add it to your parent component as shown below:

const App = createReactClass({
  mixins: [Carousel.ControllerMixin],
  render() {
    return (
      <Carousel ref="carousel" data={this.setCarouselData.bind(this, 'carousel')}>
        ...
      </Carousel>
    )
  }
});

It is required to give your component a ref value, and to pass the setCarouselData method to the data prop with the same ref as an argument.

After setting this up, your parent component has a carousels object in it's state. You can now control your carousels from other child components:

const App = createReactClass({
  mixins: [Carousel.ControllerMixin],
  render() {
    return (
      <Carousel ref="carousel" data={this.setCarouselData.bind(this, 'carousel')}>
        ...
      </Carousel>
      {this.state.carousels.carousel ? <button type="button" onClick={this.state.carousels.carousel.goToSlide.bind(null,4)}>
        Go to slide 5
      </button> : null}
    )
  }
});

Contributing

See the Contribution Docs.