akiran / react-slick Goto Github PK
View Code? Open in Web Editor NEWReact carousel component
Home Page: http://react-slick.neostack.com/
License: MIT License
React carousel component
Home Page: http://react-slick.neostack.com/
License: MIT License
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.
I searched on Bower and couldn't find react-slick
. http://bower.io/search/?q=react-slick
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
I'm seeing the following behavior when using react-slick in non-infinite mode:
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.
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>
where:
var MyComponent = React.createClass({
render: function(){
return <div> Very simple Component </div>
}
});
If I replace <Slick>
with a <div>
, <MyComponent>
is displayed once, perfectly.
Also, if I replace <MyComponent/>
with <div> test </div>
, it works correctly without triplication.
This triplication is accompanied by a glitchy carousel movement.
This is with autoscroll on:
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/
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)
This only happens when the slider component has content. Returning the slider without children does not raise the error.
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>
);
*/
};
I am using:
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)
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?
Is there support for syncing carousels like in the original slick?
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.
It would be great if you could define up,down,left,right,random as scroll directions.
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.
Do you think about integrating Slick's customPaging functionality?
This would be great! ๐
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));
});
For whatever reason iOS doesn't get the css transition
class (either not in time or doesn't support?), therefore the ReactTransitionEvents.addEndEventListener
never fires and animating
is stuck to true
, which blocks subsequent actions.
You have a props.draggable but it's never actually used anywhere.
Steps to reproduce:
npm start
in project folder and open http://localhost:8000It 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.
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>
)
},
});
Example code that works properly:
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>
)
},
});
Is this a known problem, and if so is there a good way to fix it?
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'
}),
]
};
Normally I need /** @jsx React.DOM */
at the top of my jsx files, and I see react-slick doesn't have these at the top of theirs. Is this the issue? How do I get around it?
As of now, whole lodash module is imported.
Import only necessary methods to reduce file size.
Is there any plan to support fade
option any soon?
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.
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/'));
});
I was just using the demo Slider example from the react-slick github readme
Uncaught (in promise) TypeError: Cannot read property 'forEach' of undefined
at ResponsiveMixin.componentWillUnmount (webpack:///./~/react-slick/~/react-responsive-mixin/index.js?:22:34)
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
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 !!!
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.
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.
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.
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'])
),
Which means the require('react');
within react-slick.js resolves react
to the react.js in its bower_components
directory, and fails within React's findComponentRoot
on (compiled) line 11563: firstChildren[0] = deepestAncestor.firstChild;
.
The issue is that when -slick intitialises, React looks for the root node, which is generated by a different React, therefore ReactMount.findComponentRoot
can't find reactRoot
.
Deleting the bower_components
directory inside node_modules/react-slick
fixed my issue for now, but it will come back when a fresh environment does a npm install
(including elastic beanstalk or heroku builds). I haven't got a permanent solution yet.
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
Slick has a list of several methods we can use to programmatically control the carousel. How do we access them through this component?
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 .
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;
}
Is this by design or is there another reason for this?
Cheers
Stephen Roberts
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.
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 ?
Slick Settings
Slick Events
Slick Methods
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.
Following the directions and running the following commands:
npm install react-slick
bower install slick-carousel
I then drop in the example component into my project:
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>
);
}
});
And when I render it it looks like this:
I noticed you commented out lazyLoad in default-props.js. Will there be support for this in the future?
Thanks!
Are InitialSlide enabled? I need it, is on defaultProps but I don't know if there is implemented.
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')
)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.