diff --git a/src/__tests__/Carousel.js b/src/__tests__/Carousel.js
index fd7d64f8..8e8bcd69 100644
--- a/src/__tests__/Carousel.js
+++ b/src/__tests__/Carousel.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
import { shallow, mount } from 'enzyme';
import renderer from 'react-test-renderer';
import * as index from '../index';
+import Swipe from 'react-easy-swipe';
describe("Slider", function() {
jest.autoMockOff();
@@ -76,6 +77,7 @@ describe("Slider", function() {
infiniteLoop: false,
selectedItem: 0,
axis: 'horizontal',
+ verticalSwipe: 'standard',
useKeyboardArrows: false,
autoPlay: false,
stopOnHover: true,
@@ -587,6 +589,33 @@ describe("Slider", function() {
expect(componentInstance.autoPlay.mock.calls.length).toBe(1);
});
});
+
+ describe('verticalSwipe === \'standard\'', () => {
+ it('should pass the correct props to ', () => {
+ renderDefaultComponent({
+ axis: 'vertical',
+ });
+
+ const swipeProps = component.find(Swipe).first().props();
+
+ expect(swipeProps.onSwipeUp).toBe(componentInstance.decrement);
+ expect(swipeProps.onSwipeDown).toBe(componentInstance.increment);
+ });
+ });
+
+ describe('verticalSwipe === \'natural\'', () => {
+ it('should pass the correct props to ', () => {
+ renderDefaultComponent({
+ axis: 'vertical',
+ verticalSwipe: 'natural',
+ });
+
+ const swipeProps = component.find(Swipe).first().props();
+
+ expect(swipeProps.onSwipeUp).toBe(componentInstance.increment);
+ expect(swipeProps.onSwipeDown).toBe(componentInstance.decrement);
+ });
+ });
});
describe('center mode', () => {
@@ -610,7 +639,7 @@ describe("Slider", function() {
expect(componentInstance.getPosition(5)).toBe(-500);
expect(componentInstance.getPosition(6)).toBe(-600);
});
-
+
it('should return padded transform calculation for horizontal axis', () => {
expect(componentInstance.getPosition(0)).toBe(0);
expect(componentInstance.getPosition(1)).toBe(-70);
diff --git a/src/components/Carousel.js b/src/components/Carousel.js
index 5d9025a2..f3c906aa 100644
--- a/src/components/Carousel.js
+++ b/src/components/Carousel.js
@@ -28,6 +28,7 @@ class Carousel extends Component {
onClickThumb: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,
axis: PropTypes.oneOf(['horizontal', 'vertical']),
+ verticalSwipe: PropTypes.oneOf(['natural', 'standard']),
width: customPropTypes.unit,
useKeyboardArrows: PropTypes.bool,
autoPlay: PropTypes.bool,
@@ -50,6 +51,7 @@ class Carousel extends Component {
infiniteLoop: false,
selectedItem: 0,
axis: 'horizontal',
+ verticalSwipe: 'standard',
width: '100%',
useKeyboardArrows: false,
autoPlay: false,
@@ -339,7 +341,7 @@ class Carousel extends Component {
if (this.props.centerMode && this.props.axis === 'horizontal') {
let currentPosition = - index * this.props.centerSlidePercentage;
const lastPosition = this.props.children.length - 1;
-
+
if (index && index !== lastPosition) {
currentPosition += (100 - this.props.centerSlidePercentage) / 2;
} else if (index === lastPosition) {
@@ -573,8 +575,8 @@ class Carousel extends Component {
}
} else {
- swiperProps.onSwipeUp = this.decrement;
- swiperProps.onSwipeDown = this.increment;
+ swiperProps.onSwipeUp = this.props.verticalSwipe === 'natural' ? this.increment : this.decrement;
+ swiperProps.onSwipeDown = this.props.verticalSwipe === 'natural' ? this.decrement : this.increment;
swiperProps.style.height = this.state.itemSize;
containerStyles.height = this.state.itemSize;
}
diff --git a/stories/index.js b/stories/index.js
index 7ac5acb8..eb42e911 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -254,6 +254,11 @@ storiesOf('Carousel')
{ baseChildren.props.children }
), { source: true, inline: true, propTables: false})
+ .addWithInfo('vertical axis + emulateTouch + "natural" vertical swipe', () => (
+
+ { baseChildren.props.children }
+
+ ), { source: true, inline: true, propTables: false})
.addWithInfo('youtube', () => (