Merge pull request #1 from phattranky/feature/add_custom_slide_left_callback

Feature/add custom slide left callback

Author: phattranky

README.md

@@ -5,6 +5,22 @@
 
 Carousel component built with React. It is a react port of [slick carousel](http://kenwheeler.github.io/slick/)
 
+Extend from https://github.com/akiran/react-slick
+### Additionals:
+* Prop: customTargetSlideLeft for control target slide left offset
+```
+  handleCustomTagetSlideLeft(targetLeft, currentSlide, targetSlide) {
+    return (targetLeft + 100);
+  }
+```
+* customCurrentSlideLeft: same as target
+* onInitTargetLeft for control target slide left on init
+```
+  onInitTargetLeft(targetLeft, slideCount, slideWidth, trackWidth) {
+    return (targetLeft + 100);
+  }
+```
+
 ### Important
 ### Breaking changes in [email protected]
  * slickGoTo prop is deprecated in favor of slickGoTo method. Check this [slickGoTo usage example](https://github.com/akiran/react-slick/blob/master/examples/SlickGoTo.js).

docs/demos.jsx

@@ -10,6 +10,7 @@ import Responsive from '../examples/Responsive'
 import UnevenSetsInfinite from '../examples/UnevenSetsInfinite'
 import UnevenSetsFinite from '../examples/UnevenSetsFinite'
 import CenterMode from '../examples/CenterMode'
+import CenterModeWithFiniteCustomLeft from  '../examples/CenterModeWithFiniteCustomLeft'
 import FocusOnSelect from '../examples/FocusOnSelect'
 import AutoPlay from '../examples/AutoPlay'
 import PauseOnHover from '../examples/PauseOnHover'
@@ -37,6 +38,7 @@ export default class App extends React.Component {
         <UnevenSetsInfinite />
         <UnevenSetsFinite />
         <CenterMode />
+        <CenterModeWithFiniteCustomLeft />
         <FocusOnSelect />
         <AutoPlay />
         <PauseOnHover />

examples/CenterModeWithFiniteCustomLeft.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react'
+import Slider from '../src/slider'
+
+export default class CenterModeWithFiniteCustomLeft extends Component {
+  handleCustomTagetSlideLeft(targetLeft, currentSlide, targetSlide) {
+    return (targetLeft + 100);
+  }
+
+  handleCustomCurrentSlideLeft(currentLeft) {
+    return (currentLeft + 100);
+  }
+
+  onInitTargetLeft(targetLeft, slideCount, slideWidth, trackWidth) {
+    return 0;
+  }
+
+  render() {
+    const settings = {
+      className: 'center',
+      centerMode: true,
+      infinite: false,
+      centerPadding: 0,
+      variableWidth: true,
+      onInitTargetLeft: this.onInitTargetLeft,
+      customTargetSlideLeft: this.handleCustomTagetSlideLeft,
+      customCurrentSlideLeft: this.handleCustomCurrentSlideLeft,
+      speed: 500
+    };
+    return (
+      <div>
+        <h2>Center Mode (finite) - Custom Slide Left - Move left 100 each step</h2>
+        <div style={{width: 520}}>
+        
+          <Slider {...settings}>
+            <div style={{width: 240}}><h3>1</h3></div>
+            <div style={{width: 240}}><h3>2</h3></div>
+            <div style={{width: 240}}><h3>3</h3></div>
+            <div style={{width: 240}}><h3>4</h3></div>
+            <div style={{width: 240}}><h3>5</h3></div>
+            <div style={{width: 240}}><h3>6</h3></div>
+            <div style={{width: 240}}><h3>7</h3></div>
+            <div style={{width: 240}}><h3>8</h3></div>
+            <div style={{width: 240}}><h3>9</h3></div>
+          </Slider>
+        </div>
+      </div>
+    );
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-slick",
-  "version": "0.14.3",
+  "name": "react-slick-carousel",
+  "version": "0.14.4",
   "description": " React port of slick carousel",
   "main": "./lib",
   "scripts": {
@@ -9,11 +9,11 @@
     "test": "karma start --single-run",
     "dev-test": "karma start"
   },
-  "author": "Kiran Abburi",
+  "author": "Phat Tran Ky",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/akiran/react-slick"
+    "url": "https://github.com/phattranky/react-slick-carousel"
   },
   "keywords": [
     "slick",
@@ -89,7 +89,7 @@
     }
   ],
   "bugs": {
-    "url": "https://github.com/akiran/react-slick/issues"
+    "url": "https://github.com/phattranky/react-slick-carousel/issues"
   },
-  "homepage": "https://github.com/akiran/react-slick"
+  "homepage": "https://github.com/phattranky/react-slick-carousel"
 }

src/default-props.js

@@ -40,6 +40,9 @@ var defaultProps = {
     waitForAnimate: true,
     afterChange: null,
     beforeChange: null,
+    customTargetSlideLeft: null,
+    customCurrentSlideLeft: null,
+    onInitTargetLeft: null,
     edgeEvent: null,
     init: null,
     swipeEvent: null,

src/mixins/helpers.js

@@ -40,6 +40,10 @@ var helpers = {
         trackRef: this.track
       }, props, this.state));
       // getCSS function needs previously set state
+
+      if (this.props.onInitTargetLeft) {
+        targetLeft = this.props.onInitTargetLeft(targetLeft, slideCount, slideWidth, trackWidth);
+      }
       var trackStyle = getTrackCSS(assign({left: targetLeft}, props, this.state));
 
       this.setState({trackStyle: trackStyle});
@@ -225,6 +229,10 @@ var helpers = {
 
     if (this.props.useCSS === false) {
 
+      if(this.props.customCurrentSlideLeft) {
+        currentLeft = this.props.customCurrentSlideLeft(currentLeft, currentSlide, targetSlide);
+      }
+
       this.setState({
         currentSlide: currentSlide,
         trackStyle: getTrackCSS(assign({left: currentLeft}, this.props, this.state))
@@ -236,6 +244,10 @@ var helpers = {
 
     } else {
 
+      if(this.props.customCurrentSlideLeft) {
+        currentLeft = this.props.customCurrentSlideLeft(currentLeft, currentSlide, targetSlide);
+      }
+
       var nextStateChanges = {
         animating: false,
         currentSlide: currentSlide,
@@ -251,6 +263,10 @@ var helpers = {
         delete this.animationEndCallback;
       };
 
+      if(this.props.customTargetSlideLeft) {
+        targetLeft = this.props.customTargetSlideLeft(targetLeft, currentSlide, targetSlide);
+      }
+
       this.setState({
         animating: true,
         currentSlide: currentSlide,