formidablelabs / nuka-carousel Goto Github PK

When dragging to slide on desktop, the image is dragged by the browser as well for drag and drop support. Does this on both Firefox and Chromium (Linux). Especially in Firefox's case it makes it tricky to get to another slide this way.

It's already RC2: https://facebook.github.io/react/blog/2016/03/16/react-v15-rc2.html

Tests use some api of react that was deprecated or changed in 0.14(React.render, React.addons.TestUtils, React.unmountComponentAtNode etc). They should be migrated.

I'll make a pull request.

(title)

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.

I have been trying to set up my carousel with links to another page but it looks like the carousel obliterates my react-router links. Is this possible to do?

How would you include custom arrows if using ES6 (no mixin support)?

Here: https://github.com/kenwheeler/nuka-carousel/blob/111b6f16f8304b3c9fea17f192d087de264ec603/src/carousel.js#L181

The tag should have scoped attribute.

The W3 Validator at https://validator.w3.org/nu/ shows the following error:

Error: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
From line 69, column 58948; to line 69, column 59018
div></div><style type="text/css" data-reactid=".10kyjyg7ojk.0.4.0.1.0.4.0.0.0.2">.slide
Contexts in which element style may be used:
If the scoped attribute is absent: where metadata content is expected.
If the scoped attribute is absent: in a noscript element that is a child of a head element.
If the scoped attribute is present: where flow content is expected, but before any other flow content other than inter-element whitespace and style elements, and not as the child of an element whose content model is transparent.
Content model for element div:
Flow content.

I want a carousel with contents instead of images in the carousel. Can someone suggest the way i can accomplish that ... Thank you

How do i hide the default controls (Prev, next and the bullets) ?

Hey!

I'm trying to pass some props from the carousel to my custom decorators (using decorators={Decorators}). What's the best way to do it?

Thanks a lot

When I choose vertical mode in carousel. The swipe directions remains same as that of horizontal carousel. Seen in samsung galexy tab, chrome browser.

here the formula:
slidesToScroll = Math.floor(frameWidth / (slideWidth + this.props.cellSpacing));
problem is when I set slidesToShow = 3 and cellSpacing=18
slidesToScroll 'auto' should result 3 slides to scroll but the result is two
In my case correct framewidths would be frameWidth = 3*slideWidth + 2*cellSpacing bacause cellSpacing is only visible twice
The current calculation would be correct if there would be 3*cellSpacing visible

actually in case of slidesToShow set in props, slidesToScroll in case 'auto' should just be equal to slidesToShow

Let's say I want to have an icon or something rather than the default "Prev" and "Next" - is there a way to do that?

At certain (odd) pixel screen widths the translate left position gets a half pixel value.

e.g. transform: translate3d(-325.5px, 0px, 0px);

This causes all text within the carousel to be blurry. Can this value be rounded to a whole number?

this.getTweeningValue('left') => Math.round(this.getTweeningValue('left'))

1.1.2+ is not published to npm, but be nice to publish the current :)

I have a carousel that shows 4 at a time, and scrolls by 4. Works great.

One issue I ran into is when I have 10 slides so there are 2 sets of 4, then on the last set there are only 2 slides so I have 2 slides on the left, and 2 empty spaces on the right. It would be better if at that point the slider just scrolled 2 slides over rather than 4 and leaving an empty space.

I've used slick a lot in the past and am almost certain it does this, so I was hoping for some guidance on doing this with nuka-carousel.

Hello! Thanks for the great React component!

Now, I tried looking on the docs and even on the component itself and it isn't clear to me how to pass the initial slide to the component. This and the 'loop to first/last' is very important for the project I'm currently working on.

edit: Temporarily fixed with this pull request: #15

Thanks a lot!

When binding the slidesToShow attribute to a dynamic variable, it takes some time to update, I believe this is because the slidesToShow pop is not being updated in componentWillReceiveProps().

Hello!

When using your component, I'm prompted with the following warning

Any idea of what is happening?

Thanks a lot

I'd like to add a feature but it's not clear to me how to get the demo running. Any help would be appreciated!

Gif:

Code:

const ResponsiveSettings = {
  mobile: {
    slidesToShow: 1,
    slidesToScroll: 1,
    decorators: Decorators.mobile,
    initialSlideWidth: 300,
    responsive: [{
      selectors: ["x-small", "small"]
    }]
  },
  tablet: {
    slidesToShow: 4,
    slidesToScroll: 4,
    framePadding: "20px 40px",
    decorators: Decorators.tablet,
    initialSlideWidth: 60
  },
  desktop: {
    vertical: true,
    dragging: false,
    slidesToShow: 5,
    slidesToScroll: 5,
    width: "90px",
    framePadding: "40px 0px",
    cellSpacing: 20,
    decorators: Decorators.desktop,
    initialSlideHeight: 61
  }
};

const responsive = [
  {
    selectors: ["large", "x-large", "xx-large"],
    settings: desktop
  },
  {
    selectors: ["medium"],
    settings: tablet
  },
  {
    selectors: ["x-small", "small"],
    settings: mobile
  }
];

// parent
class ProductImage extends React.Component {
  constructor(props) {
    super(props);

    // bind context on functions
    this._handleHover = this._handleHover.bind(this);
    this._handleClick = this._handleClick.bind(this);

    // set initial state
    this.state = {
      activeIndex: 0,
      lastIndex: 0
    };
  }

  _handleHover(enter, index) {
    return () => (
      this.setState({
        activeIndex: enter ? index : this.state.lastIndex
      })
    );
  }

  _handleClick(index) {
    return () => (
      this.setState({
        activeIndex: index,
        lastIndex: index
      })
    );
  }

  render() {
    const self = this;

    const { images } = this.props;

    return (
      <AltImageCarousel
        {...{
          images,
          handleHover: this._handleHover,
          handleClick: this._handleClick,
          activeIndex: this.state.activeIndex,
          lastIndex: this.state.lastIndex
        }}
      />
    );
  }
}
export const AltImageCarousel = ({
  handleHover,
  handleClick,
  activeIndex,
  lastIndex,
  images
}) => (
  <Carousel {...{responsive}} slideIndex={ lastIndex }>
    {
      images.map((img, index) => {
        const classNameSuffix = activeIndex === index ? "--active" : "";
        const className = `prod-AltImageCarousel${classNameSuffix}`;
        return (
          <img
            src={image.thumb}
            key={index}
            {...{className, img}}
            onMouseEnter={handleHover(true, index)}
            onMouseLeave={handleHover(false, index)}
            onClick={handleClick(index)}
          />
        );
      })
    }
  </Carousel>
);

@kenwheeler as per our discussion, creating this ticket for adding support for

• carousel events like on slide change, before slide change.
• data-lazy functionality for lazy loading images with in slick carousel

Thanks,
Nikhilesh

Please add documentation for using Carousel.ControllerMixin in es6 code.

Hi there,
It will be ideal to support any aspect ratio like in the case of users uploads, then scale the slides to result in the same height with a variable width...
What do you think?
Is there a way to set this at the current version?

Simple visual reference from a carousel written in php...
http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php

At the moment I have this in my CSS:

.slider-list[style*=";width:0;"] {
    width: auto !important;
}

This fixes issue where I get unnecessary extra visual flash when React renders nuka-carousel for the first time on client, because the image I have inside is set to 100%, but that equals to 0px on initial render and therefore I end up in zero width and height.

It would be better to default to auto when width is not known so that I can get rid of the above hack fix.

The visibility: visible; style makes an element visible regardless of the parent containers' visibility: hidden;.

The visibility: inherit; should be used as the opposite to hidden here:
https://github.com/kenwheeler/nuka-carousel/blob/111b6f16f8304b3c9fea17f192d087de264ec603/src/carousel.js#L643

visibility: this.state.slideWidth ? 'visible' : 'hidden'

Reference: https://jakearchibald.com/2014/visible-undoes-hidden/

Today , es6 is very popular in FrontEnd.
I hope you give a solution to solve the incompatible

Thank you very much!

Forgive me if this is a dumb question but following the instructions / using the demo code, it displays the first and last slide stacked on top of each other rather than only displaying the first slide.

I can't seem to find what is missing to fix this.

Thanks.

UPDATE:

I just realized I had a 1px border on all items to help with layout development and once I removed that then it displayed appropriately.

So my next question is: Shouldn't the size calculation take into consideration any styling being applied?

Would probably be best to debounce/throttle the window.onresize event handler for better performance: https://github.com/kenwheeler/nuka-carousel/blob/954f616962d71c42878a73485a6ceef6505970c3/src/carousel.js#L396

Thoughts?

This is a specific use case that won't affect everyone but thought I'd let you know.

I am using this carousel to display a number of products. Each of these products has a header, a long-ish product description and then a footer. These product headers are sticky in that they become position:fixed; once they reach the top of the window and then scroll with you.

There is a known bug with css that stops position:fixed from working when the element or parent has been transformed: http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/

To solve this we have had to revert back to an earlier version that still uses left to position the carousel. If this could be a configurable option(translate or left), that would be ideal. I understand the animation benefits of transitioning the translate property over the left property so it would make sense that that is the default.

Completely understand if this is not something you are interested in, otherwise I could work on getting a PR together.

Cheers,
Laurie

ERROR
npm ERR! peerinvalid The package react-dom does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react-dom@^0.14.3

Local dependencies
"dependencies": {
"react-dom": "~15.0.1",
"normalize.css": "~4.0.0",
"react": "~15.0.1",
"react-imageloader": "~2.1.0"
},
"devDependencies": {
"react-hot-loader": "~1.3.0",
"babel-loader": "~6.2.4",
"webpack-dev-server": "~1.14.1",
"webpack": "~1.12.15",
"babel-core": "~6.7.6",
"babel-preset-es2015": "~6.6.0",
"babel-preset-react": "~6.5.0",
"file-loader": "~0.8.5",
"style-loader": "~0.13.1",
"css-loader": "~0.23.1",
"es6-promise": "~3.1.2"
}

Is there anyway to loop slides ? Like when on the last slide onSwype redirect to first.

The last version in npm is 1.0.2, please publish 1.0.3 and 1.0.4.

Thanks

Decorator styles are getting the Webkit prefix but not the ms ones so positioning is off on IE9. For example here: https://github.com/kenwheeler/nuka-carousel/blob/master/src/carousel.js#L658

Great project ken.

I'm trying to use this component but am running into issues. The project page shows how to make a carousel out of many images. But how do I make a carousel out of many react components?
Is that possible?
I tried

var React = require('react/addons'),
    tweenState = require('react-tween-state'),

    // # mixins
    StateStreamMixin = require('../util/stateStreamMixin'),
    Carousel = require('nuka-carousel');

var Work = React.createClass({
  mixins: [
    tweenState.Mixin,
    StateStreamMixin,
    Carousel.ControllerMixin
  ],

    return (
      <Carousel>
        <section
          id='work'
          className='work'>
                 ...
        </section>
      </Carousel>
    );
  }
});

module.exports = Work;

The browser complains Uncaught TypeError: children.map is not a function
https://github.com/kenwheeler/nuka-carousel/blob/954f616962d71c42878a73485a6ceef6505970c3/lib/carousel.js#L427

I noticed that the plugin forces lots of renders on swipe or when changing slide (using the arrows).

The way I saw this was by logging a message from the render method of my custom arrow decorators.

I think this is totally fine if there's no logic going on with the slides (case we're only displaying images), but my slides, each of them, has some logic, user interaction, etc... so the slider is getting slow. It's possible that I'm doing something wrong too.

So my question is: is there any way to avoid or improve all the rendering because of the slide position? In the last case, I'll see if I can remove all the animations... and thanks again for the great component!

Nevermind, fixed.

If you add a cellSpacing swiping between slides become increasingly jumpy as you get longer into the slide deck. This happens on iOS (Android too perhaps?), but works well on Desktop as far as I can tell. I guess there might be some thouch calculation that fails to properly adjust for cellSpacing?

Can be replicated by adding cellSpacing={20} to the live example on the nuke-carousel site using any touch device.

I will try to see if I can find the issue and submit a fix PR in the coming days. If you can give me any pointers I'd appreciate it.

How I select an element in the slider by click and highlight it?

I try running the tests and:

$ gulp test [08:05:30] Using gulpfile ~/tmp/nuka-carousel/Gulpfile.js [08:05:30] Starting 'lint'... [08:05:30] Finished 'lint' after 506 ms [08:05:30] Starting 'karma'... ERROR [config]: File /Users/jherri1/tmp/nuka-carousel/karma.conf.js does not exist!

Would it be possible to wrap the ControllerMixin functionality into a higher-order component?

I want to show other different images. Vertical and horizontal together. I see free space after vertical photo. It is possible to remove this space?

I tried to write slideWidth="auto", but see, that <li> have width: 0 after this...

there is any way to trigger setDimensions manually ?

thanks!

getDecoratorStyles() on line 635 should have a way to be overwritten. I cannot position decorators on another position then the cases that have been set here.

How do I position the arrows? I cant seem to figure it out when i have two. Position is center left but it positions both of them on the center left.

var Decorators = [{
component: React.createClass({
render() {
return (

It would be nice if lazy loading is implemented for images

Is there a property to keep the dots from displaying?