akiran / react-slick Goto Github PK

Even though I'm only passing in a single React Component as a child to Slick, the item is trippled.
Here's an example:

<Slick >
  <MyComponent/>
</Slick>

var MyComponent = React.createClass({
  render: function(){
    return <div> Very simple Component </div>
  }
});

The problem is from line 203 of lib/mixins/helpers.js

    this.setState({
      animating: true,
      currentSlide: currentSlide,
      currentLeft: currentLeft,
      trackStyle: this.getAnimateCSS(targetLeft)
    }, function () {
      ReactTransitionEvents.addEndEventListener(this.refs.track.getDOMNode(), function() {
        this.setState({
          animating: false,
          trackStyle: this.getCSS(currentLeft),
          swipeLeft: null
        });
      }.bind(this));
    });

How I can to include css and fonts files in my react-project?There Are on node_modules, I think. But I don't know how to include them.

Thanks

Following the directions and running the following commands:

npm install react-slick

bower install slick-carousel

var React = require('react');
var Slider = require('react-slick');

var SimpleSlider = React.createClass({
  render: function () {
    var settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <Slider {...settings}>
        <div><h3>1</h3></div>
        <div><h3>2</h3></div>
        <div><h3>3</h3></div>
        <div><h3>4</h3></div>
        <div><h3>5</h3></div>
        <div><h3>6</h3></div>
      </Slider>
    );
  }
});

It would be great if there was a demo with corresponding CSS to help get started. Yeoman Generator isn't working for me. There isn't a demo folder with a webpack config you can just run.

Attempting to use your react-slick component and I'm getting a build error, that looks to be because you don't specify "reactify" as a dependency anywhere in your package.json even though you're using it as a browserify transform. You must have it installed locally, but just forgot to commit that to the package.json?

>> Error: Cannot find module 'reactify' from './node_modules/react-slick'
Warning: Error running grunt-browserify. Use --force to continue.

I get the following output when trying to run "npm install" in the react-slick directory:

> [email protected] install /Users/paulme/Google Drive/Development/Awfbeat/MVM/dev_website/react/node/mvm-react-radium/node_modules/react-slick/node_modules/sass-loader/node_modules/node-sass
> node scripts/install.js

Binary downloaded and installed at /Users/paulme/Google Drive/Development/Awfbeat/MVM/dev_website/react/node/mvm-react-radium/node_modules/react-slick/node_modules/sass-loader/node_modules/node-sass/vendor/darwin-x64/binding.node

> [email protected] postinstall /Users/paulme/Google Drive/Development/Awfbeat/MVM/dev_website/react/node/mvm-react-radium/node_modules/react-slick/node_modules/sass-loader/node_modules/node-sass
> node scripts/build.js

`darwin-x64` exists; testing
module.js:355
  Module._extensions[extension](this, filename);
                               ^
Error: Module did not self-register.
    at Error (native)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/paulme/Google Drive/Development/Awfbeat/MVM/dev_website/react/node/mvm-react-radium/node_modules/react-slick/node_modules/sass-loader/node_modules/node-sass/lib/index.js:181:15)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
npm ERR! Darwin 14.3.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.1
npm ERR! npm  v2.7.5
npm ERR! code ELIFECYCLE

npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script 'node scripts/build.js'.
npm ERR! This is most likely a problem with the node-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node scripts/build.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls node-sass
npm ERR! There is likely additional logging output above.

If we forgot to add in markup, slide demos are getting miss aligned
and there is huge space between slides and dots.

Need to debug this .

Do you have plans to add this feature from Slick Carousel?

rows
int
1
Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row.

Consistently receiving the following error when trying to import this module.

ERROR in ./~/react-slick/lib/slider.jsx
Module parse failed: /Users/.../node_modules/react-slick/lib/slider.jsx Line 52: Unexpected token <
You may need an appropriate loader to handle this file type.
|     }
|     return (
|       <InnerSlider {...settings}/>
|     );
|   }
 @ ./~/react-slick/index.jsx 1:17-44

The example on the github page does not even compiler due to this ...{setting}.
I can't fine the react-slider.js anyway but managed to cut and paste it from http://webrafter.com/opensource/react-slick by viewing the source.
But even then, I'm getting this error at runtime
Uncaught ReferenceError: webpackJsonp is not definedreact-slick.js:1 (anonymous function)

You have a props.draggable but it's never actually used anywhere.

Hi,

I'm relatively new to React so this might be a stupid question, but I can't get react-slick to compile/build.

I installed with npm install react-slick and bower install slick-carousel. I've successfully installed other node components, and never had to do anything more than npm install <component>

I'm using gulp to build, which in turn uses webpack to build the js/jsx. The error is as follows:

ERROR in ./~/react-slick/lib/slider.jsx Module parse failed: /Users/.../app/node_modules/jsx-loader/index.js!/Users/.../app/node_modules/react-slick/lib/slider.jsx Line 46: Unexpected token < You may need an appropriate loader to handle this file type. | } | return ( | <InnerSlider {...settings}/> | ); | } @ ./~/react-slick/index.jsx 1:17-40

My webpack config is as follows:

var webpack = require('webpack');
var UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
var config = require('./build.configs.js');
module.exports = {
    context: __dirname + '/src',
    watch: false,
    entry: './index.jsx',
    output: {
        path: __dirname + '/' + config.targetDirectory + '/www/js',
        filename: 'bundle.js',
        publicPath: '/',
        chunkFilename: '[chunkhash].js'
    },
    resolve: {
        root: [
            __dirname + '/assets-src/bower/',
            __dirname + '/assets-src/js/',
            __dirname +'/node_modules/'
        ],
        extensions: ['', '.js', '.jsx'],
        modulesDirectories: ['assets-src/bower', 'node_modules'],
        alias: {'snapjs': __dirname + '/assets-src/bower/snapjs/snap.js',
                'spinjs': __dirname + '/assets-src/bower/spinjs/spin.js'}
    },
    module: {
        loaders: [
        { test: /\.jsx$/, loaders: ['jsx'] }
        ],
        noParse: /\.min\.js/
    },
    externals: {

    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
    ]
    };

I noticed you commented out lazyLoad in default-props.js. Will there be support for this in the future?

Thanks!

I would like to use this, but need support for onClick and onTap event. When clicked that item should be selected. I see a option focusOnselect but it not seems to work

like in following image

Currently testing on Android Nexus 5.

When I load the slick demos on the device, scrolling vertically does not break. When I try to scroll from an area where the slider is, it lets me just fine.

When I load the demos for react-slick on the device, vertical scrolling is broken. When I try to scroll from an area where the slider is, it doesn't let me.

The way I encountered this issue was trying to create a greater than full height of the page slider doesn't allow me to scroll on the device to the bottom of the page.

Slider portion works great, but any buttons that are within the panes are having their click events trapped. I attempted to turn off the swipe detection, but that also didn't allow clicks to go through. Any thoughts?

var Slick = require('react/react-slick');
React.createElement(Slick, {},
     React.DOM.button({onClick: function() {console.log('does this work??');}}, 'one'),
     React.DOM.button({onClick: function() {console.log('does this work??');}}, 'two'),
     React.DOM.button({onClick: function() {console.log('does this work??');}}, 'three'),
     React.DOM.button({onClick: function() {console.log('does this work??');}}, 'four'),
     React.DOM.button({onClick: function() {console.log('does this work??');}}, 'five'),
     React.DOM.button({onClick: function() {console.log('does this work??');}}, 'six')
)

I searched on Bower and couldn't find react-slick. http://bower.io/search/?q=react-slick

Are InitialSlide enabled? I need it, is on defaultProps but I don't know if there is implemented.

I have a slider with about 200 elements. Each element is a react component.
When I have lazyLoad set to true, no slides are loaded. I have to advance the slider first.
The slider initializes and is displayed (if the height of a slide is defined in CSS), but it is empty. The dots appear. When I do a swipe action, the next image is loaded.

Setting 'initialSlide' does not help either.

Autoscroll does not seem to be working either with lazy loading.

When centerMode is set to true, I have to set 'infinite' to false or the slider crashes when going past 0.

It would be great to implement like current jQuery-Slick a resize function who recalculate position of each item on browser resize.
Have you planned to implement this ?

Hi, thanks for the great port.

When I'm using centerMode, with slidesToShow: 5, slidesToScroll: 1, I'm seeing the fourth item selected. Is that working as intended?

Not very easy to use, I had to add webpack jsx loaders and edit after-transition component. It's just to lengthy process and destructable edits to make this work.

Is there any plan to support fade option any soon?

It would be great if you could define up,down,left,right,random as scroll directions.

I'm using the latest version of Chrome and can reproduce this in the example.

Slide or drag forward a few items, then drag back. If you attempt to drag when its already easing back into place after a previous drag, you can cause the items to get stuck and dragging no longer has easing. If you attempt to use the buttons at this point they will not work. Refreshing the page seems to be the only way to resolve this.

Slick has a list of several methods we can use to programmatically control the carousel. How do we access them through this component?

I'm trying it with demo page and I can drag but if I click on one of images suddenly dragging is disabled, dots don't respond.

I'm seeing the following behavior when using react-slick in non-infinite mode:

• with slidesToShow=1 and 1 item in the carousel, the div can be dragged left or right, it does not snap back. I noticed that the jquery slick carousel does not allow swiping in this case where there are no more slides to show.
• when dragging/swiping past the beginning or end of the carousel (also slidesToShow=1, but many slides in the carousel), the carousel does not 'snap back' to the first (or last) slide, but stays dragged out of alignment.

The CSS for .slick-slide specifies a height of 100%, which causes images in my slides to be stretched out of proportion, depending how the browser window is sized. If I take off the height property, it works fine sometimes, but often re-renders at a 1px height. If there was a way for me to tell the component to re-calculate its size, I would first of all use this to calculate the size after the initial image had loaded (using onLoad), and then also re-calculate the size as the user resizes their browser window.

in my webpack.config.js I have:

  resolve: {
    extensions: ['', '.js', '.jsx'],
    modulesDirectories: ['bower_components', 'node_modules'],
  },
  plugins: [
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main'])
    ),

I was trying to use react-slick and ran into the following issue trying to use it with the reactify transform using browserify.

TypeError: Object reactify,[object Object] has no method 'match'

Here is my gulpfile: I was using gulp-browserify which could be the issue. I am going to try using it with vinyl-source-stream as I know this is the correct way to use browserify with gulp, and will report back if it fixes the issue.

var gulp = require('gulp'),
      browserify = require('gulp-browserify'),
      reactify = require ('reactify');

gulp.task('scripts', function () {
  var bundles = ['app/client/slider.js' ];
  return gulp.src(bundles)
    .pipe(browserify({
        debug: true,
        transform: [reactify]
    }))
    .pipe(gulp.dest('./public/scripts/'));
});

Hey,

I really want to use your work for a big project but the warping animation bug is really a downer. How do you think this problem can be fixed ? I can try to help by submitting a PR if you have some idea of where to start to fix this bug :)

maybe using ReactCSSTransitionGroup ?

Let me know, Thanks !!!

On safari mac ( 8.0.6 (10600.6.3) ), I can only slide one time after that I can't go back or further.
Works fine the first time with each navigation button (next, back, drag&drop and navigation)

By the way I don't have the slide animation.

No problem on firefox and chrome.

Is there support for syncing carousels like in the original slick?

Do you think about integrating Slick's customPaging functionality?

This would be great! 👍

As of now, whole lodash module is imported.
Import only necessary methods to reduce file size.

I'm having trouble getting the library to work with the examples provided. I get the following:

TypeError: Cannot read property 'hasOwnProperty' of undefined
    at Object.checkAndWarnForMutatedProps (react.js:10440)
    at Object.ReactReconciler.mountComponent (react.js:14094)
    at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (react.js:12835)
    at ReactDOMComponent.Mixin._createContentMarkup (react.js:7701)
    at ReactDOMComponent.Mixin.mountComponent (react.js:7611)
    at Object.ReactReconciler.mountComponent (react.js:14092)
    at ReactCompositeComponentMixin.mountComponent (react.js:6413)
    at ReactPerf.measure.wrapper [as mountComponent] (react.js:13391)
    at Object.ReactReconciler.mountComponent (react.js:14092)
    at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (react.js:12835)

    render: function() {

      var settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
      };

      return (
        <div>
          <h5>Slider Demo</h5>
          <Slider {...settings}>
            <div><h3>One</h3></div>
            <div><h3>Two</h3></div>
            <div><h3>Three</h3></div>
          </Slider>
        </div>
        );

      /*
       // this does not throw an error
       return (
         <div>
         <h5>Slider Demo</h5>
         <Slider {...settings}>
         </Slider>
         </div>
         );
      */
    };

Resizing the window will not cause the slick carousel to change its width as expected.

Resizing the window to be smaller will not shrink the carousel element.

Resizing the window to be bigger with a single item carousel will result in seeing portions of the next slide.

I'm not sure if this is the same as issue #64

Slick Settings

• accessibility
• adaptiveHeight
• autoplay
• autoplaySpeed
• centerMode
• centerPadding
• cssEase
• customPaging
• dots
• dotsClass
• draggable
• easing
• edgeFriction
• fade
• arrows
• appendArrows
• appendDots
• mobileFirst
• prevArrow
• nextArrow
• infinite
• initialSlide
• lazyLoad
• pauseOnHover
• pauseOnDotsHover
• respondTo
• responsive
• rows
• slide
• slidesPerRow
• slidesToShow
• slidesToScroll
• speed
• swipe
• swipeToSlide
• touchMove
• touchThreshold
• useCSS
• variableWidth
• vertical
• verticalSwiping
• rtl
• waitForAnimate
• zIndex

Slick Events

• afterChange
• beforeChange
• breakpoint
• destroy
• edge
• init
• reInit
• setPosition
• swipe

Slick Methods

• unslick
• slickAdd and slickRemove
• slickFilter and slickUnfilter
• slickPlay and slickPause
• slickNext and slickPrev
• slickGoTo
• slickCurrentSlide
• slickGetOption and slickSetOption

I have a working react-slick slider, and I can change the state of the initialSlide and affect change, however that results in a re-render instead of animating to the new slide position.

Is there a recommended way to duplicate the slickGoTo functionality from a react component?

The react dependency should be put to the peerDependency segment of the packages.json. Projects with different react versions cannot use this lib:
http://blog.nodejs.org/2013/02/07/peer-dependencies/

Steps to reproduce:

• run npm start in project folder and open http://localhost:8000
• click on carousel of Center Mode

Thanks for this library!

I tried initializing a <Slider> with a user defined React component as children, the proper spacing between elements to satisfy slidesToShow and slidesToScroll is not set. However, when I "inline" these elements, things work great.

Example code that doesn't work properly:

  var Bar = React.createClass({
    render: function() {
      return (
          <div>
            <img src={this.props.imageUrl} />
          </div>
      );
    },
  });

  var Foo = React.createClass({
    render: function() {
      var items = this.props.items.map(function(item, i) {
        return (
          <Bar key={item.id} imageUrl={item.imageUrl} />
        );
      });

      var settings = {
        arrows: true,
        dots: true,
        responsive: false,
        infinite: false,
        draggable: false,
        slidesToShow: 10,
        slidesToScroll: 5,
      };

      return (
        <Slider className='my-class' {...settings}>
          {items}
        </Slider>
      )
    },
  });

  var Foo = React.createClass({
    render: function() {
      var items = this.props.items.map(function(item, i) {
        return (
          <div key={item.id}>
            <img src={item.imageUrl} />
          </div>
        );
      });

      var settings = {
        arrows: true,
        dots: true,
        responsive: false,
        infinite: false,
        draggable: false,
        slidesToShow: 10,
        slidesToScroll: 5,
      };

      return (
        <Slider className='my-class' {...settings}>
          {items}
        </Slider>
      )
    },
  });

Hey

I've noticed that the navigation buttons only work when the animating state is false, does anyone know the reasoning behind this? you can see what I mean here

I've disabled in In my usage by doing this (logic was copied from the further if statement 4 lines down)

if (this.state.animating === true && this.state.currentSlide === index) {
     return;
}