react-responsive-carousel - npm Package Compare versions

Comparing version 3.1.11 to 3.1.12

TROUBLESHOOTING.md

CHANGELOG.md

		# React Responsive Carousel


		## 3.1.11 - Wed Apr 26 2017
		* Merge pull request #111 from leandrowd/issue-98-1
		> Solving SSR problem when children is lazy loaded.
		* #98: Adding snapshot tests


		## 3.1.10 - Tue Apr 25 2017
		@@ -123,7 +129,5 @@ * Merge pull request #110 from leandrowd/issue-109
		* Add infinite looping documentation
		* Deploying storybook demos


		## 3.0.17 - Wed Sep 14 2016
		* Adding example with videos

		@@ -130,0 +134,0 @@

978

lib/components/Carousel.js

		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		var _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

		var React = require('react');
		var ReactDOM = require('react-dom');
		var PropTypes = require('prop-types');
		var CreateReactClass = require('create-react-class');
		var klass = require('../cssClasses');
		var merge = require('../object-assign');
		var CSSTranslate = require('../CSSTranslate');
		var Swipe = require('react-easy-swipe');
		var Thumbs = require('./Thumbs');
		var customPropTypes = require('../customPropTypes');
		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		// react-swipe was compiled using babel
		Swipe = Swipe.default;
		var _react = require('react');

		module.exports = CreateReactClass({
		displayName: 'Carousel',
		propTypes: {
		className: PropTypes.string,
		children: PropTypes.node,
		showArrows: PropTypes.bool,
		showStatus: PropTypes.bool,
		showIndicators: PropTypes.bool,
		infiniteLoop: PropTypes.bool,
		showThumbs: PropTypes.bool,
		selectedItem: PropTypes.number,
		onClickItem: PropTypes.func,
		onClickThumb: PropTypes.func,
		onChange: PropTypes.func,
		axis: PropTypes.oneOf(['horizontal', 'vertical']),
		width: customPropTypes.unit,
		useKeyboardArrows: PropTypes.bool,
		autoPlay: PropTypes.bool,
		stopOnHover: PropTypes.bool,
		interval: PropTypes.number,
		transitionTime: PropTypes.number,
		swipeScrollTolerance: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
		dynamicHeight: PropTypes.bool,
		emulateTouch: PropTypes.bool
		},
		var _react2 = _interopRequireDefault(_react);

		getDefaultProps: function getDefaultProps() {
		return {
		showIndicators: true,
		showArrows: true,
		showStatus: true,
		showThumbs: true,
		infiniteLoop: false,
		selectedItem: 0,
		axis: 'horizontal',
		width: '100%',
		useKeyboardArrows: false,
		autoPlay: false,
		stopOnHover: true,
		interval: 3000,
		transitionTime: 350,
		swipeScrollTolerance: 5,
		dynamicHeight: false,
		emulateTouch: false
		var _reactDom = require('react-dom');

		var _reactDom2 = _interopRequireDefault(_reactDom);

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _cssClasses = require('../cssClasses');

		var _cssClasses2 = _interopRequireDefault(_cssClasses);

		var _objectAssign = require('../object-assign');

		var _objectAssign2 = _interopRequireDefault(_objectAssign);

		var _CSSTranslate = require('../CSSTranslate');

		var _CSSTranslate2 = _interopRequireDefault(_CSSTranslate);

		var _reactEasySwipe = require('react-easy-swipe');

		var _reactEasySwipe2 = _interopRequireDefault(_reactEasySwipe);

		var _Thumbs = require('./Thumbs');

		var _Thumbs2 = _interopRequireDefault(_Thumbs);

		var _customPropTypes = require('../customPropTypes');

		var customPropTypes = _interopRequireWildcard(_customPropTypes);

		function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

		function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" \|\| typeof call === "function") ? call : self; }

		function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

		var Carousel = function (_Component) {
		_inherits(Carousel, _Component);

		function Carousel(props) {
		_classCallCheck(this, Carousel);

		var _this = _possibleConstructorReturn(this, (Carousel.__proto__ \|\| Object.getPrototypeOf(Carousel)).call(this, props));

		_this.navigateWithKeyboard = function (e) {
		var nextKeys = ['ArrowDown', 'ArrowRight'];
		var prevKeys = ['ArrowUp', 'ArrowLeft'];
		var allowedKeys = nextKeys.concat(prevKeys);

		if (allowedKeys.indexOf(e.key) > -1) {
		if (nextKeys.indexOf(e.key) > -1) {
		_this.increment();
		} else if (prevKeys.indexOf(e.key) > -1) {
		_this.decrement();
		}
		}
		};
		},
		getInitialState: function getInitialState() {
		return {
		initialized: false,
		selectedItem: this.props.selectedItem,
		hasMount: false
		};
		},
		componentDidMount: function componentDidMount() {
		if (!this.props.children) {
		return;
		}

		this.setupCarousel();
		},
		componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
		if (nextProps.selectedItem !== this.state.selectedItem) {
		this.updateSizes();
		this.setState({
		selectedItem: nextProps.selectedItem
		_this.updateSizes = function () {
		if (!_this.state.initialized) {
		return;
		}

		var isHorizontal = _this.props.axis === 'horizontal';
		var firstItem = _this.refs.item0;
		var itemSize = isHorizontal ? firstItem.clientWidth : firstItem.clientHeight;

		_this.setState({
		itemSize: itemSize,
		wrapperSize: isHorizontal ? itemSize * _this.props.children.length : itemSize
		});
		}
		};

		if (nextProps.autoPlay !== this.props.autoPlay) {
		if (nextProps.autoPlay) {
		this.setupAutoPlay();
		} else {
		this.destroyAutoPlay();
		_this.setMountState = function () {
		_this.setState({ hasMount: true });
		_this.updateSizes();
		};

		_this.handleClickItem = function (index, item) {
		if (_this.state.cancelClick) {
		_this.selectItem({
		cancelClick: false
		});

		return;
		}
		}
		},
		componentDidUpdate: function componentDidUpdate(prevProps) {
		if (!prevProps.children && this.props.children && !this.state.initialized) {
		this.setupCarousel();
		}
		},
		componentWillUnmount: function componentWillUnmount() {
		this.destroyCarousel();
		},
		setupCarousel: function setupCarousel() {
		this.bindEvents();

		if (this.props.autoPlay) {
		this.setupAutoPlay();
		}
		var handler = _this.props.onClickItem;

		this.setState({
		initialized: true
		});
		if (typeof handler === 'function') {
		handler(index, item);
		}

		var initialImage = this.getInitialImage();
		if (initialImage) {
		// if it's a carousel of images, we set the mount state after the first image is loaded
		initialImage.addEventListener('load', this.setMountState);
		} else {
		this.setMountState();
		}
		},
		destroyCarousel: function destroyCarousel() {
		if (this.state.initialized) {
		this.unbindEvents();
		this.destroyAutoPlay();
		}
		},
		setupAutoPlay: function setupAutoPlay() {
		this.autoPlay();
		if (index !== _this.state.selectedItem) {
		_this.setState({
		selectedItem: index
		});
		}
		};

		if (this.props.stopOnHover) {
		var carouselWrapper = this.refs['carouselWrapper'];
		carouselWrapper.addEventListener('mouseenter', this.stopOnHover);
		carouselWrapper.addEventListener('touchstart', this.stopOnHover);
		carouselWrapper.addEventListener('mouseleave', this.autoPlay);
		carouselWrapper.addEventListener('touchend', this.autoPlay);
		}
		},
		destroyAutoPlay: function destroyAutoPlay() {
		this.clearAutoPlay();
		var carouselWrapper = this.refs['carouselWrapper'];
		_this.handleOnChange = function (index, item) {
		var handler = _this.props.onChange;

		if (this.props.stopOnHover && carouselWrapper) {
		carouselWrapper.removeEventListener('mouseenter', this.stopOnHover);
		carouselWrapper.removeEventListener('touchstart', this.stopOnHover);
		carouselWrapper.removeEventListener('mouseleave', this.autoPlay);
		carouselWrapper.removeEventListener('touchend', this.autoPlay);
		}
		},
		autoPlay: function autoPlay() {
		var _this = this;
		if (typeof handler === 'function') {
		handler(index, item);
		}
		};

		this.timer = setTimeout(function () {
		_this.increment();
		}, this.props.interval);
		},
		clearAutoPlay: function clearAutoPlay() {
		clearTimeout(this.timer);
		},
		resetAutoPlay: function resetAutoPlay() {
		this.clearAutoPlay();
		this.autoPlay();
		},
		stopOnHover: function stopOnHover() {
		this.clearAutoPlay();
		},
		bindEvents: function bindEvents() {
		// as the widths are calculated, we need to resize
		// the carousel when the window is resized
		window.addEventListener("resize", this.updateSizes);
		// issue #2 - image loading smaller
		window.addEventListener("DOMContentLoaded", this.updateSizes);
		_this.handleClickThumb = function (index, item) {
		var handler = _this.props.onClickThumb;

		if (this.props.useKeyboardArrows) {
		document.addEventListener("keydown", this.navigateWithKeyboard);
		}
		},
		unbindEvents: function unbindEvents() {
		// removing listeners
		window.removeEventListener("resize", this.updateSizes);
		window.removeEventListener("DOMContentLoaded", this.updateSizes);
		if (typeof handler === 'function') {
		handler(index, item);
		}

		var initialImage = this.getInitialImage();
		if (initialImage) {
		initialImage.removeEventListener("load", this.setMountState);
		}
		_this.selectItem({
		selectedItem: index
		});
		};

		if (this.props.useKeyboardArrows) {
		document.removeEventListener("keydown", this.navigateWithKeyboard);
		}
		},
		navigateWithKeyboard: function navigateWithKeyboard(e) {
		var nextKeys = ['ArrowDown', 'ArrowRight'];
		var prevKeys = ['ArrowUp', 'ArrowLeft'];
		var allowedKeys = nextKeys.concat(prevKeys);
		_this.onSwipeStart = function () {
		_this.setState({
		swiping: true
		});
		};

		if (allowedKeys.indexOf(e.key) > -1) {
		if (nextKeys.indexOf(e.key) > -1) {
		this.increment();
		} else if (prevKeys.indexOf(e.key) > -1) {
		this.decrement();
		_this.onSwipeEnd = function () {
		_this.setState({
		swiping: false,
		cancelClick: true
		});
		};

		_this.onSwipeMove = function (delta) {
		var list = _reactDom2.default.findDOMNode(_this.refs.itemList);
		var isHorizontal = _this.props.axis === 'horizontal';

		var initialBoundry = 0;

		var currentPosition = -_this.state.selectedItem * 100;
		var finalBoundry = -(_this.props.children.length - 1) * 100;

		var axisDelta = isHorizontal ? delta.x : delta.y;
		var handledDelta = axisDelta;

		// prevent user from swiping left out of boundaries
		if (currentPosition === initialBoundry && axisDelta > 0) {
		handledDelta = 0;
		}
		}
		},
		updateSizes: function updateSizes() {
		if (!this.state.initialized) {
		return;
		}

		var isHorizontal = this.props.axis === 'horizontal';
		var firstItem = this.refs.item0;
		var itemSize = isHorizontal ? firstItem.clientWidth : firstItem.clientHeight;
		// prevent user from swiping right out of boundaries
		if (currentPosition === finalBoundry && axisDelta < 0) {
		handledDelta = 0;
		}

		this.setState({
		itemSize: itemSize,
		wrapperSize: isHorizontal ? itemSize * this.props.children.length : itemSize
		});
		},
		setMountState: function setMountState() {
		this.setState({ hasMount: true });
		this.updateSizes();
		},
		handleClickItem: function handleClickItem(index, item) {
		if (this.state.cancelClick) {
		this.selectItem({
		cancelClick: false
		var position = currentPosition + 100 / (_this.state.itemSize / handledDelta) + '%';

		['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) {
		list.style[prop] = (0, _CSSTranslate2.default)(position, _this.props.axis);
		});

		return;
		}
		// allows scroll if the swipe was within the tolerance
		return Math.abs(axisDelta) > _this.props.swipeScrollTolerance;
		};

		var handler = this.props.onClickItem;
		_this.decrement = function (positions) {
		_this.moveTo(_this.state.selectedItem - (typeof positions === 'Number' ? positions : 1));
		};

		if (typeof handler === 'function') {
		handler(index, item);
		}
		_this.increment = function (positions) {
		_this.moveTo(_this.state.selectedItem + (typeof positions === 'Number' ? positions : 1));
		};

		if (index !== this.state.selectedItem) {
		this.setState({
		selectedItem: index
		_this.moveTo = function (position) {
		var lastPosition = _this.props.children.length - 1;

		if (position < 0) {
		position = _this.props.infiniteLoop ? lastPosition : 0;
		}

		if (position > lastPosition) {
		position = _this.props.infiniteLoop ? 0 : lastPosition;
		}

		_this.selectItem({
		// if it's not a slider, we don't need to set position here
		selectedItem: position
		});
		}
		},
		handleOnChange: function handleOnChange(index, item) {
		var handler = this.props.onChange;

		if (typeof handler === 'function') {
		handler(index, item);
		}
		},
		handleClickThumb: function handleClickThumb(index, item) {
		var handler = this.props.onClickThumb;
		if (_this.props.autoPlay) {
		_this.resetAutoPlay();
		}
		};

		if (typeof handler === 'function') {
		handler(index, item);
		}
		_this.changeItem = function (e) {
		var newIndex = e.target.value;

		this.selectItem({
		selectedItem: index
		});
		},
		onSwipeStart: function onSwipeStart() {
		this.setState({
		swiping: true
		});
		},
		onSwipeEnd: function onSwipeEnd() {
		this.setState({
		swiping: false,
		cancelClick: true
		});
		},
		onSwipeMove: function onSwipeMove(delta) {
		var _this2 = this;
		_this.selectItem({
		selectedItem: newIndex
		});
		};

		var list = ReactDOM.findDOMNode(this.refs.itemList);
		var isHorizontal = this.props.axis === 'horizontal';
		_this.selectItem = function (state) {
		_this.setState(state);
		_this.handleOnChange(state.selectedItem, _this.props.children[state.selectedItem]);
		};

		var initialBoundry = 0;
		_this.state = {
		initialized: false,
		selectedItem: props.selectedItem,
		hasMount: false
		};
		return _this;
		}

		var currentPosition = -this.state.selectedItem * 100;
		var finalBoundry = -(this.props.children.length - 1) * 100;
		_createClass(Carousel, [{
		key: 'componentDidMount',
		value: function componentDidMount() {
		if (!this.props.children) {
		return;
		}

		var axisDelta = isHorizontal ? delta.x : delta.y;
		var handledDelta = axisDelta;

		// prevent user from swiping left out of boundaries
		if (currentPosition === initialBoundry && axisDelta > 0) {
		handledDelta = 0;
		this.setupCarousel();
		}
		}, {
		key: 'componentWillReceiveProps',
		value: function componentWillReceiveProps(nextProps) {
		if (nextProps.selectedItem !== this.state.selectedItem) {
		this.updateSizes();
		this.setState({
		selectedItem: nextProps.selectedItem
		});
		}

		// prevent user from swiping right out of boundaries
		if (currentPosition === finalBoundry && axisDelta < 0) {
		handledDelta = 0;
		if (nextProps.autoPlay !== this.props.autoPlay) {
		if (nextProps.autoPlay) {
		this.setupAutoPlay();
		} else {
		this.destroyAutoPlay();
		}
		}
		}
		}, {
		key: 'componentDidUpdate',
		value: function componentDidUpdate(prevProps) {
		if (!prevProps.children && this.props.children && !this.state.initialized) {
		this.setupCarousel();
		}
		}
		}, {
		key: 'componentWillUnmount',
		value: function componentWillUnmount() {
		this.destroyCarousel();
		}
		}, {
		key: 'setupCarousel',
		value: function setupCarousel() {
		this.bindEvents();

		var position = currentPosition + 100 / (this.state.itemSize / handledDelta) + '%';
		if (this.props.autoPlay) {
		this.setupAutoPlay();
		}

		['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) {
		list.style[prop] = CSSTranslate(position, _this2.props.axis);
		});
		this.setState({
		initialized: true
		});

		// allows scroll if the swipe was within the tolerance
		return Math.abs(axisDelta) > this.props.swipeScrollTolerance;
		},
		decrement: function decrement(positions) {
		this.moveTo(this.state.selectedItem - (typeof positions === 'Number' ? positions : 1));
		},
		increment: function increment(positions) {
		this.moveTo(this.state.selectedItem + (typeof positions === 'Number' ? positions : 1));
		},
		moveTo: function moveTo(position) {
		var lastPosition = this.props.children.length - 1;
		var initialImage = this.getInitialImage();
		if (initialImage) {
		// if it's a carousel of images, we set the mount state after the first image is loaded
		initialImage.addEventListener('load', this.setMountState);
		} else {
		this.setMountState();
		}
		}
		}, {
		key: 'destroyCarousel',
		value: function destroyCarousel() {
		if (this.state.initialized) {
		this.unbindEvents();
		this.destroyAutoPlay();
		}
		}
		}, {
		key: 'setupAutoPlay',
		value: function setupAutoPlay() {
		this.autoPlay();

		if (position < 0) {
		position = this.props.infiniteLoop ? lastPosition : 0;
		if (this.props.stopOnHover) {
		var carouselWrapper = this.refs['carouselWrapper'];
		carouselWrapper.addEventListener('mouseenter', this.stopOnHover);
		carouselWrapper.addEventListener('touchstart', this.stopOnHover);
		carouselWrapper.addEventListener('mouseleave', this.autoPlay);
		carouselWrapper.addEventListener('touchend', this.autoPlay);
		}
		}
		}, {
		key: 'destroyAutoPlay',
		value: function destroyAutoPlay() {
		this.clearAutoPlay();
		var carouselWrapper = this.refs['carouselWrapper'];

		if (position > lastPosition) {
		position = this.props.infiniteLoop ? 0 : lastPosition;
		if (this.props.stopOnHover && carouselWrapper) {
		carouselWrapper.removeEventListener('mouseenter', this.stopOnHover);
		carouselWrapper.removeEventListener('touchstart', this.stopOnHover);
		carouselWrapper.removeEventListener('mouseleave', this.autoPlay);
		carouselWrapper.removeEventListener('touchend', this.autoPlay);
		}
		}
		}, {
		key: 'autoPlay',
		value: function autoPlay() {
		var _this2 = this;

		this.selectItem({
		// if it's not a slider, we don't need to set position here
		selectedItem: position
		});
		this.timer = setTimeout(function () {
		_this2.increment();
		}, this.props.interval);
		}
		}, {
		key: 'clearAutoPlay',
		value: function clearAutoPlay() {
		clearTimeout(this.timer);
		}
		}, {
		key: 'resetAutoPlay',
		value: function resetAutoPlay() {
		this.clearAutoPlay();
		this.autoPlay();
		}
		}, {
		key: 'stopOnHover',
		value: function stopOnHover() {
		this.clearAutoPlay();
		}
		}, {
		key: 'bindEvents',
		value: function bindEvents() {
		// as the widths are calculated, we need to resize
		// the carousel when the window is resized
		window.addEventListener("resize", this.updateSizes);
		// issue #2 - image loading smaller
		window.addEventListener("DOMContentLoaded", this.updateSizes);

		if (this.props.autoPlay) {
		this.resetAutoPlay();
		if (this.props.useKeyboardArrows) {
		document.addEventListener("keydown", this.navigateWithKeyboard);
		}
		}
		},
		changeItem: function changeItem(e) {
		var newIndex = e.target.value;
		}, {
		key: 'unbindEvents',
		value: function unbindEvents() {
		// removing listeners
		window.removeEventListener("resize", this.updateSizes);
		window.removeEventListener("DOMContentLoaded", this.updateSizes);

		this.selectItem({
		selectedItem: newIndex
		});
		},
		selectItem: function selectItem(state) {
		this.setState(state);
		this.handleOnChange(state.selectedItem, this.props.children[state.selectedItem]);
		},
		renderItems: function renderItems() {
		var _this3 = this;
		var initialImage = this.getInitialImage();
		if (initialImage) {
		initialImage.removeEventListener("load", this.setMountState);
		}

		return React.Children.map(this.props.children, function (item, index) {
		var hasMount = _this3.state.hasMount;
		var itemClass = klass.ITEM(true, index === _this3.state.selectedItem);
		if (this.props.useKeyboardArrows) {
		document.removeEventListener("keydown", this.navigateWithKeyboard);
		}
		}
		}, {
		key: 'renderItems',
		value: function renderItems() {
		var _this3 = this;

		return React.createElement(
		'li',
		{ ref: "item" + index, key: "itemKey" + index, className: itemClass,
		onClick: _this3.handleClickItem.bind(_this3, index, item) },
		item
		);
		});
		},
		renderControls: function renderControls() {
		var _this4 = this;
		return _react2.default.Children.map(this.props.children, function (item, index) {
		var hasMount = _this3.state.hasMount;
		var itemClass = _cssClasses2.default.ITEM(true, index === _this3.state.selectedItem);

		if (!this.props.showIndicators) {
		return null;
		return _react2.default.createElement(
		'li',
		{ ref: "item" + index, key: "itemKey" + index, className: itemClass,
		onClick: _this3.handleClickItem.bind(_this3, index, item) },
		item
		);
		});
		}
		}, {
		key: 'renderControls',
		value: function renderControls() {
		var _this4 = this;

		return React.createElement(
		'ul',
		{ className: 'control-dots' },
		React.Children.map(this.props.children, function (item, index) {
		return React.createElement('li', { className: klass.DOT(index === _this4.state.selectedItem), onClick: _this4.changeItem, value: index, key: index });
		})
		);
		},
		renderStatus: function renderStatus() {
		if (!this.props.showStatus) {
		return null;
		if (!this.props.showIndicators) {
		return null;
		}

		return _react2.default.createElement(
		'ul',
		{ className: 'control-dots' },
		_react2.default.Children.map(this.props.children, function (item, index) {
		return _react2.default.createElement('li', { className: _cssClasses2.default.DOT(index === _this4.state.selectedItem), onClick: _this4.changeItem, value: index, key: index });
		})
		);
		}
		}, {
		key: 'renderStatus',
		value: function renderStatus() {
		if (!this.props.showStatus) {
		return null;
		}

		return React.createElement(
		'p',
		{ className: 'carousel-status' },
		this.state.selectedItem + 1,
		' of ',
		this.props.children.length
		);
		},
		renderThumbs: function renderThumbs() {
		if (!this.props.showThumbs \|\| this.props.children.length === 0) {
		return null;
		return _react2.default.createElement(
		'p',
		{ className: 'carousel-status' },
		this.state.selectedItem + 1,
		' of ',
		this.props.children.length
		);
		}
		}, {
		key: 'renderThumbs',
		value: function renderThumbs() {
		if (!this.props.showThumbs \|\| this.props.children.length === 0) {
		return null;
		}

		return React.createElement(
		Thumbs,
		{ onSelectItem: this.handleClickThumb, selectedItem: this.state.selectedItem, transitionTime: this.props.transitionTime },
		this.props.children
		);
		},
		getInitialImage: function getInitialImage() {
		var selectedItem = this.props.selectedItem;
		var item = this.refs['item' + selectedItem];
		var images = item && item.getElementsByTagName('img');
		return images && images[selectedItem];
		},
		getVariableImageHeight: function getVariableImageHeight(position) {
		var _this5 = this;
		return _react2.default.createElement(
		_Thumbs2.default,
		{ onSelectItem: this.handleClickThumb, selectedItem: this.state.selectedItem, transitionTime: this.props.transitionTime },
		this.props.children
		);
		}
		}, {
		key: 'getInitialImage',
		value: function getInitialImage() {
		var selectedItem = this.props.selectedItem;
		var item = this.refs['item' + selectedItem];
		var images = item && item.getElementsByTagName('img');
		return images && images[selectedItem];
		}
		}, {
		key: 'getVariableImageHeight',
		value: function getVariableImageHeight(position) {
		var _this5 = this;

		var item = this.refs['item' + position];
		var images = item && item.getElementsByTagName('img');
		if (this.state.hasMount && images.length > 0) {
		var image = images[0];
		var item = this.refs['item' + position];
		var images = item && item.getElementsByTagName('img');
		if (this.state.hasMount && images.length > 0) {
		var image = images[0];

		if (!image.complete) {
		// if the image is still loading, the size won't be available so we trigger a new render after it's done
		var onImageLoad = function onImageLoad() {
		_this5.forceUpdate();
		image.removeEventListener('load', onImageLoad);
		};
		if (!image.complete) {
		// if the image is still loading, the size won't be available so we trigger a new render after it's done
		var onImageLoad = function onImageLoad() {
		_this5.forceUpdate();
		image.removeEventListener('load', onImageLoad);
		};

		image.addEventListener('load', onImageLoad);
		image.addEventListener('load', onImageLoad);
		}

		var height = image.clientHeight;
		return height > 0 ? height : null;
		}

		var height = image.clientHeight;
		return height > 0 ? height : null;
		}

		return null;
		},
		render: function render() {
		if (!this.props.children \|\| this.props.children.length === 0) {
		return null;
		}
		}, {
		key: 'render',
		value: function render() {
		if (!this.props.children \|\| this.props.children.length === 0) {
		return null;
		}

		var itemsLength = this.props.children.length;
		var itemsLength = this.props.children.length;

		var isHorizontal = this.props.axis === 'horizontal';
		var isHorizontal = this.props.axis === 'horizontal';

		var canShowArrows = this.props.showArrows && itemsLength > 1;
		var canShowArrows = this.props.showArrows && itemsLength > 1;

		// show left arrow?
		var hasPrev = canShowArrows && (this.state.selectedItem > 0 \|\| this.props.infiniteLoop);
		// show right arrow
		var hasNext = canShowArrows && (this.state.selectedItem < itemsLength - 1 \|\| this.props.infiniteLoop);
		// obj to hold the transformations and styles
		var itemListStyles = {};
		// show left arrow?
		var hasPrev = canShowArrows && (this.state.selectedItem > 0 \|\| this.props.infiniteLoop);
		// show right arrow
		var hasNext = canShowArrows && (this.state.selectedItem < itemsLength - 1 \|\| this.props.infiniteLoop);
		// obj to hold the transformations and styles
		var itemListStyles = {};

		var currentPosition = -this.state.selectedItem * 100 + '%';
		var currentPosition = -this.state.selectedItem * 100 + '%';

		// if 3d is available, let's take advantage of the performance of transform
		var transformProp = CSSTranslate(currentPosition, this.props.axis);
		// if 3d is available, let's take advantage of the performance of transform
		var transformProp = (0, _CSSTranslate2.default)(currentPosition, this.props.axis);

		var transitionTime = this.props.transitionTime + 'ms';
		var transitionTime = this.props.transitionTime + 'ms';

		itemListStyles = {
		'WebkitTransform': transformProp,
		'MozTransform': transformProp,
		'MsTransform': transformProp,
		'OTransform': transformProp,
		'transform': transformProp,
		'msTransform': transformProp,
		'WebkitTransitionDuration': transitionTime,
		'MozTransitionDuration': transitionTime,
		'MsTransitionDuration': transitionTime,
		'OTransitionDuration': transitionTime,
		'transitionDuration': transitionTime,
		'msTransitionDuration': transitionTime
		};
		itemListStyles = {
		'WebkitTransform': transformProp,
		'MozTransform': transformProp,
		'MsTransform': transformProp,
		'OTransform': transformProp,
		'transform': transformProp,
		'msTransform': transformProp,
		'WebkitTransitionDuration': transitionTime,
		'MozTransitionDuration': transitionTime,
		'MsTransitionDuration': transitionTime,
		'OTransitionDuration': transitionTime,
		'transitionDuration': transitionTime,
		'msTransitionDuration': transitionTime
		};

		var swiperProps = {
		selectedItem: this.state.selectedItem,
		className: klass.SLIDER(true, this.state.swiping),
		onSwipeMove: this.onSwipeMove,
		onSwipeStart: this.onSwipeStart,
		onSwipeEnd: this.onSwipeEnd,
		style: itemListStyles,
		ref: 'itemList'
		};
		var swiperProps = {
		selectedItem: this.state.selectedItem,
		className: _cssClasses2.default.SLIDER(true, this.state.swiping),
		onSwipeMove: this.onSwipeMove,
		onSwipeStart: this.onSwipeStart,
		onSwipeEnd: this.onSwipeEnd,
		style: itemListStyles,
		ref: 'itemList'
		};

		var containerStyles = {};
		var containerStyles = {};

		if (isHorizontal) {
		merge(swiperProps, {
		onSwipeLeft: this.increment,
		onSwipeRight: this.decrement
		});
		if (isHorizontal) {
		(0, _objectAssign2.default)(swiperProps, {
		onSwipeLeft: this.increment,
		onSwipeRight: this.decrement
		});

		if (this.props.dynamicHeight) {
		var itemHeight = this.getVariableImageHeight(this.state.selectedItem);
		swiperProps.style.height = itemHeight \|\| 'auto';
		containerStyles.height = itemHeight \|\| 'auto';
		if (this.props.dynamicHeight) {
		var itemHeight = this.getVariableImageHeight(this.state.selectedItem);
		swiperProps.style.height = itemHeight \|\| 'auto';
		containerStyles.height = itemHeight \|\| 'auto';
		}
		} else {
		(0, _objectAssign2.default)(swiperProps, {
		onSwipeUp: this.decrement,
		onSwipeDown: this.increment
		});

		swiperProps.style.height = this.state.itemSize;
		containerStyles.height = this.state.itemSize;
		}
		} else {
		merge(swiperProps, {
		onSwipeUp: this.decrement,
		onSwipeDown: this.increment
		});

		swiperProps.style.height = this.state.itemSize;
		containerStyles.height = this.state.itemSize;
		}

		return React.createElement(
		'div',
		{ className: this.props.className, ref: 'carouselWrapper' },
		React.createElement(
		return _react2.default.createElement(
		'div',
		{ className: klass.CAROUSEL(true), style: { width: this.props.width } },
		React.createElement('button', { type: 'button', className: klass.ARROW_PREV(!hasPrev), onClick: this.decrement }),
		React.createElement(
		{ className: this.props.className, ref: 'carouselWrapper' },
		_react2.default.createElement(
		'div',
		{ className: klass.WRAPPER(true, this.props.axis), style: containerStyles, ref: 'itemsWrapper' },
		React.createElement(
		Swipe,
		_extends({ tagName: 'ul' }, swiperProps, { allowMouseEvents: this.props.emulateTouch }),
		this.renderItems()
		)
		{ className: _cssClasses2.default.CAROUSEL(true), style: { width: this.props.width } },
		_react2.default.createElement('button', { type: 'button', className: _cssClasses2.default.ARROW_PREV(!hasPrev), onClick: this.decrement }),
		_react2.default.createElement(
		'div',
		{ className: _cssClasses2.default.WRAPPER(true, this.props.axis), style: containerStyles, ref: 'itemsWrapper' },
		_react2.default.createElement(
		_reactEasySwipe2.default,
		_extends({ tagName: 'ul' }, swiperProps, { allowMouseEvents: this.props.emulateTouch }),
		this.renderItems()
		)
		),
		_react2.default.createElement('button', { type: 'button', className: _cssClasses2.default.ARROW_NEXT(!hasNext), onClick: this.increment }),
		this.renderControls(),
		this.renderStatus()
		),
		React.createElement('button', { type: 'button', className: klass.ARROW_NEXT(!hasNext), onClick: this.increment }),
		this.renderControls(),
		this.renderStatus()
		),
		this.renderThumbs()
		);
		}
		});
		this.renderThumbs()
		);
		}
		}]);

		return Carousel;
		}(_react.Component);

		Carousel.displayName = 'Carousel';
		Carousel.propTypes = {
		className: _propTypes2.default.string,
		children: _propTypes2.default.node,
		showArrows: _propTypes2.default.bool,
		showStatus: _propTypes2.default.bool,
		showIndicators: _propTypes2.default.bool,
		infiniteLoop: _propTypes2.default.bool,
		showThumbs: _propTypes2.default.bool,
		selectedItem: _propTypes2.default.number,
		onClickItem: _propTypes2.default.func,
		onClickThumb: _propTypes2.default.func,
		onChange: _propTypes2.default.func,
		axis: _propTypes2.default.oneOf(['horizontal', 'vertical']),
		width: customPropTypes.unit,
		useKeyboardArrows: _propTypes2.default.bool,
		autoPlay: _propTypes2.default.bool,
		stopOnHover: _propTypes2.default.bool,
		interval: _propTypes2.default.number,
		transitionTime: _propTypes2.default.number,
		swipeScrollTolerance: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
		dynamicHeight: _propTypes2.default.bool,
		emulateTouch: _propTypes2.default.bool
		};
		Carousel.defaultProps = {
		showIndicators: true,
		showArrows: true,
		showStatus: true,
		showThumbs: true,
		infiniteLoop: false,
		selectedItem: 0,
		axis: 'horizontal',
		width: '100%',
		useKeyboardArrows: false,
		autoPlay: false,
		stopOnHover: true,
		interval: 3000,
		transitionTime: 350,
		swipeScrollTolerance: 5,
		dynamicHeight: false,
		emulateTouch: false
		};
		exports.default = Carousel;

568

lib/components/Thumbs.js

		'use strict';

		var React = require('react');
		var ReactDOM = require('react-dom');
		var PropTypes = require('prop-types');
		var CreateReactClass = require('create-react-class');
		var klass = require('../cssClasses');
		var outerWidth = require('../dimensions').outerWidth;
		var CSSTranslate = require('../CSSTranslate');
		var Swipe = require('react-easy-swipe');
		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		// react-swipe was compiled using babel
		Swipe = Swipe.default;
		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		module.exports = CreateReactClass({
		var _react = require('react');

		propsTypes: {
		children: PropTypes.element.isRequired,
		transitionTime: PropTypes.number,
		selectedItem: PropTypes.number
		},
		var _react2 = _interopRequireDefault(_react);

		getDefaultProps: function getDefaultProps() {
		return {
		selectedItem: 0,
		transitionTime: 350,
		axis: 'horizontal'
		var _reactDom = require('react-dom');

		var _reactDom2 = _interopRequireDefault(_reactDom);

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _cssClasses = require('../cssClasses');

		var _cssClasses2 = _interopRequireDefault(_cssClasses);

		var _dimensions = require('../dimensions');

		var _CSSTranslate = require('../CSSTranslate');

		var _CSSTranslate2 = _interopRequireDefault(_CSSTranslate);

		var _reactEasySwipe = require('react-easy-swipe');

		var _reactEasySwipe2 = _interopRequireDefault(_reactEasySwipe);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

		function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" \|\| typeof call === "function") ? call : self; }

		function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

		var Thumbs = function (_Component) {
		_inherits(Thumbs, _Component);

		function Thumbs(props) {
		_classCallCheck(this, Thumbs);

		var _this = _possibleConstructorReturn(this, (Thumbs.__proto__ \|\| Object.getPrototypeOf(Thumbs)).call(this, props));

		_this.updateSizes = function () {
		if (!_this.state.initialized) {
		return;
		}

		var total = _this.props.children.length;
		_this.wrapperSize = _this.itemsWrapper.clientWidth;
		_this.itemSize = (0, _dimensions.outerWidth)(_this.refs.thumb0);
		_this.visibleItems = Math.floor(_this.wrapperSize / _this.itemSize);
		_this.lastPosition = total - _this.visibleItems;
		_this.showArrows = _this.visibleItems < total;
		};
		},
		getInitialState: function getInitialState() {
		return {
		initialized: false,
		selectedItem: this.props.selectedItem,
		hasMount: false,
		firstItem: this.getFirstItem(this.props.selectedItem)

		_this.setMountState = function () {
		_this.setState({ hasMount: true });
		_this.updateSizes();
		};
		},
		componentDidMount: function componentDidMount(nextProps) {
		if (!this.props.children) {
		return;
		}

		this.setupThumbs();
		},
		componentWillReceiveProps: function componentWillReceiveProps(props, state) {
		if (props.selectedItem !== this.state.selectedItem) {
		this.setState({
		selectedItem: props.selectedItem,
		firstItem: this.getFirstItem(props.selectedItem)
		_this.handleClickItem = function (index, item) {
		var handler = _this.props.onSelectItem;

		if (typeof handler === 'function') {
		handler(index, item);
		}
		};

		_this.onSwipeStart = function () {
		_this.setState({
		swiping: true
		});
		}
		},
		componentDidUpdate: function componentDidUpdate(prevProps) {
		if (!prevProps.children && this.props.children && !this.state.initialized) {
		this.setupThumbs();
		}
		},
		componentWillUnmount: function componentWillUnmount() {
		this.destroyThumbs();
		},
		setupThumbs: function setupThumbs() {
		// as the widths are calculated, we need to resize
		// the carousel when the window is resized
		window.addEventListener("resize", this.updateSizes);
		// issue #2 - image loading smaller
		window.addEventListener("DOMContentLoaded", this.updateSizes);
		};

		this.setState({
		initialized: true
		});
		_this.onSwipeEnd = function () {
		_this.setState({
		swiping: false
		});
		};

		var defaultImg = this.getDefaultImage();
		if (defaultImg) {
		defaultImg.addEventListener('load', this.setMountState);
		}
		_this.onSwipeMove = function (deltaX) {
		var leftBoundry = 0;
		var list = _reactDom2.default.findDOMNode(_this.itemList);
		var wrapperSize = list.clientWidth;
		var visibleItems = Math.floor(wrapperSize / _this.itemSize);

		// when the component is rendered we need to calculate
		// the container size to adjust the responsive behaviour
		this.updateSizes();
		},
		destroyThumbs: function destroyThumbs() {
		// removing listeners
		window.removeEventListener("resize", this.updateSizes);
		window.removeEventListener("DOMContentLoaded", this.updateSizes);
		var currentPosition = -_this.state.firstItem * _this.itemSize;
		var lastLeftBoundry = -_this.visibleItems * _this.itemSize;

		var defaultImg = this.getDefaultImage();
		if (defaultImg) {
		defaultImg.removeEventListener('load', this.setMountState);
		}
		},
		updateSizes: function updateSizes() {
		if (!this.state.initialized) {
		return;
		}
		// prevent user from swiping left out of boundaries
		if (currentPosition === leftBoundry && deltaX > 0) {
		deltaX = 0;
		}

		var total = this.props.children.length;
		this.wrapperSize = this.itemsWrapper.clientWidth;
		this.itemSize = outerWidth(this.thumb0);
		this.visibleItems = Math.floor(this.wrapperSize / this.itemSize);
		this.lastPosition = total - this.visibleItems;
		this.showArrows = this.visibleItems < total;
		},
		getDefaultImage: function getDefaultImage() {
		var firstItem = ReactDOM.findDOMNode(this.thumb0);
		// prevent user from swiping right out of boundaries
		if (currentPosition === lastLeftBoundry && deltaX < 0) {
		deltaX = 0;
		}

		if (firstItem) {
		var firstImage = firstItem.getElementsByTagName('img');
		return firstImage && firstImage[0];
		}
		var position = currentPosition + 100 / (wrapperSize / deltaX) + '%';

		return null;
		},
		setMountState: function setMountState() {
		this.setState({ hasMount: true });
		this.updateSizes();
		},
		handleClickItem: function handleClickItem(index, item) {
		var handler = this.props.onSelectItem;
		// if 3d isn't available we will use left to move
		['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) {
		list.style[prop] = (0, _CSSTranslate2.default)(position, _this.props.axis);
		});
		};

		if (typeof handler === 'function') {
		handler(index, item);
		}
		},
		onSwipeStart: function onSwipeStart() {
		this.setState({
		swiping: true
		});
		},
		onSwipeEnd: function onSwipeEnd() {
		this.setState({
		swiping: false
		});
		},
		onSwipeMove: function onSwipeMove(deltaX) {
		var _this = this;
		_this.slideRight = function (positions) {
		_this.moveTo(_this.state.firstItem - (typeof positions === 'Number' ? positions : 1));
		};

		var leftBoundry = 0;
		var list = ReactDOM.findDOMNode(this.itemList);
		var wrapperSize = list.clientWidth;
		var visibleItems = Math.floor(wrapperSize / this.itemSize);
		_this.slideLeft = function (positions) {
		_this.moveTo(_this.state.firstItem + (typeof positions === 'Number' ? positions : 1));
		};

		var currentPosition = -this.state.firstItem * this.itemSize;
		var lastLeftBoundry = -this.visibleItems * this.itemSize;
		_this.moveTo = function (position) {
		// position can't be lower than 0
		position = position < 0 ? 0 : position;
		// position can't be higher than last postion
		position = position >= _this.lastPosition ? _this.lastPosition : position;

		// prevent user from swiping left out of boundaries
		if (currentPosition === leftBoundry && deltaX > 0) {
		deltaX = 0;
		}
		_this.setState({
		firstItem: position,
		// if it's not a slider, we don't need to set position here
		selectedItem: _this.state.selectedItem
		});
		};

		// prevent user from swiping right out of boundaries
		if (currentPosition === lastLeftBoundry && deltaX < 0) {
		deltaX = 0;
		_this.state = {
		initialized: false,
		selectedItem: props.selectedItem,
		hasMount: false,
		firstItem: _this.getFirstItem(props.selectedItem),
		images: []
		};
		return _this;
		}

		_createClass(Thumbs, [{
		key: 'componentDidMount',
		value: function componentDidMount(nextProps) {
		if (!this.props.children) {
		return;
		}

		this.setupThumbs();
		}
		}, {
		key: 'componentWillReceiveProps',
		value: function componentWillReceiveProps(props, state) {
		if (props.selectedItem !== this.state.selectedItem) {
		this.setState({
		selectedItem: props.selectedItem,
		firstItem: this.getFirstItem(props.selectedItem)
		});
		}
		}
		}, {
		key: 'componentDidUpdate',
		value: function componentDidUpdate(prevProps) {
		if (!prevProps.children && this.props.children && !this.state.initialized) {
		this.setupThumbs();
		}
		}
		}, {
		key: 'componentWillUnmount',
		value: function componentWillUnmount() {
		this.destroyThumbs();
		}
		}, {
		key: 'setupThumbs',
		value: function setupThumbs() {
		// as the widths are calculated, we need to resize
		// the carousel when the window is resized
		window.addEventListener("resize", this.updateSizes);
		// issue #2 - image loading smaller
		window.addEventListener("DOMContentLoaded", this.updateSizes);

		var position = currentPosition + 100 / (wrapperSize / deltaX) + '%';
		var images = this.getImages();

		// if 3d isn't available we will use left to move
		['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) {
		list.style[prop] = CSSTranslate(position, _this.props.axis);
		});
		},
		slideRight: function slideRight(positions) {
		this.moveTo(this.state.firstItem - (typeof positions === 'Number' ? positions : 1));
		},
		slideLeft: function slideLeft(positions) {
		this.moveTo(this.state.firstItem + (typeof positions === 'Number' ? positions : 1));
		},
		moveTo: function moveTo(position) {
		// position can't be lower than 0
		position = position < 0 ? 0 : position;
		// position can't be higher than last postion
		position = position >= this.lastPosition ? this.lastPosition : position;
		if (!images) {
		return;
		}

		this.setState({
		firstItem: position,
		// if it's not a slider, we don't need to set position here
		selectedItem: this.state.selectedItem
		});
		},
		getFirstItem: function getFirstItem(selectedItem) {
		if (!this.showArrows) {
		return 0;
		this.setState({
		initialized: true,
		images: images
		});

		// when the component is rendered we need to calculate
		// the container size to adjust the responsive behaviour
		this.updateSizes();
		}
		}, {
		key: 'destroyThumbs',
		value: function destroyThumbs() {
		// removing listeners
		window.removeEventListener("resize", this.updateSizes);
		window.removeEventListener("DOMContentLoaded", this.updateSizes);
		}
		}, {
		key: 'getImages',
		value: function getImages() {
		var images = _react2.default.Children.map(this.props.children, function (item, index) {
		var img = item;

		var firstItem = selectedItem;
		// if the item is not an image, try to find the first image in the item's children.
		if (item.type !== "img") {
		img = _react2.default.Children.toArray(item.props.children).filter(function (children) {
		return children.type === "img";
		})[0];
		}

		if (selectedItem >= this.lastPosition) {
		firstItem = this.lastPosition;
		}
		if (!img \|\| img.length === 0) {
		return null;
		}

		if (selectedItem < this.state.firstItem + this.visibleItems) {
		firstItem = this.state.firstItem;
		}
		return img;
		});

		if (selectedItem < this.state.firstItem) {
		firstItem = selectedItem;
		}
		if (images.filter(function (image) {
		return image !== null;
		}).length === 0) {
		console.warn('No images found! Can\'t build the thumb list without images. If you don\'t need thumbs, set showThumbs={false} in the Carousel. Note that it\'s not possible to get images rendered inside custom components. More info at https://github.com/leandrowd/react-responsive-carousel/blob/master/TROUBLESHOOTING.md');

		return firstItem;
		},
		renderItems: function renderItems() {
		var _this2 = this;
		return null;
		}

		return React.Children.map(this.props.children, function (item, index) {
		var itemClass = klass.ITEM(false, index === _this2.state.selectedItem && _this2.state.hasMount);
		return images;
		}
		}, {
		key: 'getFirstItem',
		value: function getFirstItem(selectedItem) {
		if (!this.showArrows) {
		return 0;
		}

		var img = item;
		var firstItem = selectedItem;

		if (item.type !== "img") {
		img = React.Children.toArray(item.props.children).filter(function (children) {
		return children.type === "img";
		})[0];
		if (selectedItem >= this.lastPosition) {
		firstItem = this.lastPosition;
		}

		if (img.length) {
		console.warn(img, img.length, "No images found! Can't build the thumb list. If you don't need thumbs, set showThumbs={false} in the Carousel");
		return null;
		if (selectedItem < this.state.firstItem + this.visibleItems) {
		firstItem = this.state.firstItem;
		}

		return React.createElement(
		'li',
		{ key: index, ref: function ref(node) {
		return _this2["thumb" + index] = node;
		}, className: itemClass,
		onClick: _this2.handleClickItem.bind(_this2, index, item) },
		img
		);
		});
		},
		render: function render() {
		var _this3 = this;
		if (selectedItem < this.state.firstItem) {
		firstItem = selectedItem;
		}

		if (!this.props.children) {
		return null;
		return firstItem;
		}
		}, {
		key: 'renderItems',
		value: function renderItems() {
		var _this2 = this;

		// show left arrow?
		var hasPrev = this.showArrows && this.state.firstItem > 0;
		// show right arrow
		var hasNext = this.showArrows && this.state.firstItem < this.lastPosition;
		// obj to hold the transformations and styles
		var itemListStyles = {};
		return this.state.images.map(function (img, index) {
		var itemClass = _cssClasses2.default.ITEM(false, index === _this2.state.selectedItem && _this2.state.hasMount);

		var currentPosition = -this.state.firstItem * this.itemSize + 'px';
		var thumbProps = {
		key: index,
		ref: 'thumb' + index,
		className: itemClass,
		onClick: _this2.handleClickItem.bind(_this2, index, _this2.props.children[index])
		};

		var transformProp = CSSTranslate(currentPosition, this.props.axis);
		if (index === 0) {
		img = _react2.default.cloneElement(img, {
		onLoad: _this2.setMountState
		});
		}

		var transitionTime = this.props.transitionTime + 'ms';
		return _react2.default.createElement(
		'li',
		thumbProps,
		img
		);
		});
		}
		}, {
		key: 'render',
		value: function render() {
		var _this3 = this;

		itemListStyles = {
		'WebkitTransform': transformProp,
		'MozTransform': transformProp,
		'MsTransform': transformProp,
		'OTransform': transformProp,
		'transform': transformProp,
		'msTransform': transformProp,
		'WebkitTransitionDuration': transitionTime,
		'MozTransitionDuration': transitionTime,
		'MsTransitionDuration': transitionTime,
		'OTransitionDuration': transitionTime,
		'transitionDuration': transitionTime,
		'msTransitionDuration': transitionTime
		};
		if (!this.props.children \|\| this.state.images.length === 0) {
		return null;
		}

		return React.createElement(
		'div',
		{ className: klass.CAROUSEL(false) },
		React.createElement(
		// show left arrow?
		var hasPrev = this.showArrows && this.state.firstItem > 0;
		// show right arrow
		var hasNext = this.showArrows && this.state.firstItem < this.lastPosition;
		// obj to hold the transformations and styles
		var itemListStyles = {};

		var currentPosition = -this.state.firstItem * this.itemSize + 'px';

		var transformProp = (0, _CSSTranslate2.default)(currentPosition, this.props.axis);

		var transitionTime = this.props.transitionTime + 'ms';

		itemListStyles = {
		'WebkitTransform': transformProp,
		'MozTransform': transformProp,
		'MsTransform': transformProp,
		'OTransform': transformProp,
		'transform': transformProp,
		'msTransform': transformProp,
		'WebkitTransitionDuration': transitionTime,
		'MozTransitionDuration': transitionTime,
		'MsTransitionDuration': transitionTime,
		'OTransitionDuration': transitionTime,
		'transitionDuration': transitionTime,
		'msTransitionDuration': transitionTime
		};

		return _react2.default.createElement(
		'div',
		{ className: klass.WRAPPER(false), ref: function ref(node) {
		return _this3.itemsWrapper = node;
		} },
		React.createElement('button', { type: 'button', className: klass.ARROW_PREV(!hasPrev), onClick: this.slideRight }),
		React.createElement(
		Swipe,
		{ tagName: 'ul',
		selectedItem: this.state.selectedItem,
		className: klass.SLIDER(false, this.state.swiping),
		onSwipeLeft: this.slideLeft,
		onSwipeRight: this.slideRight,
		onSwipeMove: this.onSwipeMove,
		onSwipeStart: this.onSwipeStart,
		onSwipeEnd: this.onSwipeEnd,
		style: itemListStyles,
		ref: function ref(node) {
		return _this3.itemList = node;
		{ className: _cssClasses2.default.CAROUSEL(false) },
		_react2.default.createElement(
		'div',
		{ className: _cssClasses2.default.WRAPPER(false), ref: function ref(node) {
		return _this3.itemsWrapper = node;
		} },
		this.renderItems()
		),
		React.createElement('button', { type: 'button', className: klass.ARROW_NEXT(!hasNext), onClick: this.slideLeft })
		)
		);
		}
		});
		_react2.default.createElement('button', { type: 'button', className: _cssClasses2.default.ARROW_PREV(!hasPrev), onClick: this.slideRight }),
		_react2.default.createElement(
		_reactEasySwipe2.default,
		{ tagName: 'ul',
		selectedItem: this.state.selectedItem,
		className: _cssClasses2.default.SLIDER(false, this.state.swiping),
		onSwipeLeft: this.slideLeft,
		onSwipeRight: this.slideRight,
		onSwipeMove: this.onSwipeMove,
		onSwipeStart: this.onSwipeStart,
		onSwipeEnd: this.onSwipeEnd,
		style: itemListStyles,
		ref: function ref(node) {
		return _this3.itemList = node;
		} },
		this.renderItems()
		),
		_react2.default.createElement('button', { type: 'button', className: _cssClasses2.default.ARROW_NEXT(!hasNext), onClick: this.slideLeft })
		)
		);
		}
		}]);

		return Thumbs;
		}(_react.Component);

		Thumbs.displayName = 'Thumbs';
		Thumbs.propsTypes = {
		children: _propTypes2.default.element.isRequired,
		transitionTime: _propTypes2.default.number,
		selectedItem: _propTypes2.default.number
		};
		Thumbs.defaultProps = {
		selectedItem: 0,
		transitionTime: 350,
		axis: 'horizontal'
		};
		exports.default = Thumbs;

lib/cssClasses.js

		"use strict";

		var classNames = require('classnames');
		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		module.exports = {
		var _classnames = require("classnames");

		var _classnames2 = _interopRequireDefault(_classnames);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		exports.default = {
		CAROUSEL: function CAROUSEL(isSlider) {
		return classNames({
		return (0, _classnames2.default)({
		"carousel": true,
		@@ -12,4 +20,5 @@ "carousel-slider": isSlider
		},

		WRAPPER: function WRAPPER(isSlider, axis) {
		return classNames({
		return (0, _classnames2.default)({
		"thumbs-wrapper": !isSlider,
		@@ -21,4 +30,5 @@ "slider-wrapper": isSlider,
		},

		SLIDER: function SLIDER(isSlider, isSwiping) {
		return classNames({
		return (0, _classnames2.default)({
		"thumbs": !isSlider,
		@@ -29,4 +39,5 @@ "slider": isSlider,
		},

		ITEM: function ITEM(isSlider, selected) {
		return classNames({
		return (0, _classnames2.default)({
		"thumb": !isSlider,
		@@ -37,4 +48,5 @@ "slide": isSlider,
		},

		ARROW_PREV: function ARROW_PREV(disabled) {
		return classNames({
		return (0, _classnames2.default)({
		"control-arrow control-prev": true,
		@@ -44,4 +56,5 @@ "control-disabled": disabled
		},

		ARROW_NEXT: function ARROW_NEXT(disabled) {
		return classNames({
		return (0, _classnames2.default)({
		"control-arrow control-next": true,
		@@ -51,4 +64,5 @@ "control-disabled": disabled
		},

		DOT: function DOT(selected) {
		return classNames({
		return (0, _classnames2.default)({
		"dot": true,
		@@ -55,0 +69,0 @@ 'selected': selected

lib/CSSTranslate.js

		'use strict';

		module.exports = function (position, axis) {
		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		exports.default = function (position, axis) {
		var positionCss = axis === 'horizontal' ? [position, 0, 0] : [0, position, 0];
		@@ -5,0 +9,0 @@ var transitionProp = 'translate3d';

lib/dimensions.js

		"use strict";

		module.exports = {
		outerWidth: function outerWidth(el) {
		var width = el.offsetWidth;
		var style = getComputedStyle(el);
		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		var outerWidth = exports.outerWidth = function outerWidth(el) {
		var width = el.offsetWidth;
		var style = getComputedStyle(el);

		width += parseInt(style.marginLeft) + parseInt(style.marginRight);
		return width;
		}
		width += parseInt(style.marginLeft) + parseInt(style.marginRight);
		return width;
		};

lib/index.js

		'use strict';

		module.exports = {
		Carousel: require('./components/Carousel'),
		Thumbs: require('./components/Thumbs')
		};
		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.Thumbs = exports.Carousel = undefined;

		var _Carousel = require('./components/Carousel');

		var _Carousel2 = _interopRequireDefault(_Carousel);

		var _Thumbs = require('./components/Thumbs');

		var _Thumbs2 = _interopRequireDefault(_Thumbs);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		exports.Carousel = _Carousel2.default;
		exports.Thumbs = _Thumbs2.default;

lib/object-assign.js

		'use strict';

		module.exports = function (target) {
		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		var _arguments = arguments;

		exports.default = function (target) {
		if (target === undefined \|\| target === null) {
		@@ -9,4 +14,4 @@ throw new TypeError('Cannot convert undefined or null to object');
		var output = Object(target);
		for (var index = 1; index < arguments.length; index++) {
		var source = arguments[index];
		for (var index = 1; index < _arguments.length; index++) {
		var source = _arguments[index];
		if (source !== undefined && source !== null) {
		@@ -13,0 +18,0 @@ for (var nextKey in source) {

package.json

		{
		"name": "react-responsive-carousel",
		"version": "3.1.11",
		"version": "3.1.12",
		"description": "React Responsive Carousel",
		@@ -29,7 +29,8 @@ "author": {
		"test": "jest",
		"prepare-snapshot": "jest --updateSnapshot",
		"update-snapshots": "jest --updateSnapshot",
		"prebuild": "npm test",
		"build": "babel ./src -d lib --ignore '__tests__' && gulp styles:package copy:package",
		"prepublish-to-npm": "git pull && npm run build && npm run changelog && git add . && git commit -m 'Prepare for publishing'",
		"prepublish-to-npm": "git pull && npm run build && git add . && git commit -m 'Prepare for publishing'",
		"publish-to-npm": "(git pull origin master && npm version patch && git push origin master && npm publish && git push --tags)",
		"postpublish-to-npm": "npm run changelog && git add . && git commit -m 'Updating changelog' && git push origin master",
		"prepublish-to-gh-pages": "node --harmony ./node_modules/gulp/bin/gulp prepublish && npm run build-storybook",
		@@ -56,2 +57,3 @@ "publish-to-gh-pages": "node --harmony ./node_modules/gulp/bin/gulp publish",
		"babel-loader": "^7.0.0",
		"babel-plugin-transform-class-properties": "^6.24.1",
		"babel-preset-es2015": "^6.24.1",
		@@ -96,3 +98,2 @@ "babel-preset-react": "^6.24.1",
		"classnames": "^2.2.5",
		"create-react-class": "^15.5.2",
		"react-easy-swipe": "^0.0.10",
		@@ -99,0 +100,0 @@ "prop-types": "^15.5.8"

README.md

		@@ -25,3 +25,2 @@ # React Responsive Carousel


		### Demo
		@@ -32,3 +31,2 @@ <http://leandrowd.github.io/react-responsive-carousel/>


		### Installing as a package
		@@ -136,1 +134,5 @@ `npm install react-responsive-carousel --save`
		<http://react-responsive-carousel.js.org/storybook/>

		=======================

		[CHANGELOG](https://github.com/leandrowd/react-responsive-carousel/blob/master/CHANGELOG.md) - [TROUBLESHOOTING](https://github.com/leandrowd/react-responsive-carousel/blob/master/TROUBLESHOOTING.md)

166

stories/index.js

		@@ -30,3 +30,3 @@ import React, { Component } from 'react';

		class LazyLoadedCarousel extends Component {
		export class LazyLoadedCarousel extends Component {
		constructor (props) {
		@@ -200,17 +200,17 @@ super(props);
		<Carousel showThumbs={false}>
		<div key="youtube-1">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/n0F6hSpxaFc" />
		</div>
		<div key="youtube-1">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/n0F6hSpxaFc" />
		</div>

		<div key="youtube-2">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/C-y70ZOSzE0" />
		</div>
		<div key="youtube-2">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/C-y70ZOSzE0" />
		</div>

		<div key="youtube-3">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/IyTv_SR2uUo" />
		</div>
		<div key="youtube-3">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/IyTv_SR2uUo" />
		</div>

		<div key="youtube-4">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/3zrfGHQd4Bo" />
		</div>
		<div key="youtube-4">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/3zrfGHQd4Bo" />
		</div>
		</Carousel>
		@@ -220,73 +220,73 @@ ), { source: true, inline: true, propTables: false})
		<Carousel showThumbs={ false } showStatus={ false } useKeyboardArrows className="presentation-mode">
		<div key="content-0" className="my-slide primary">
		<h1>Presentation mode</h1>
		</div>
		<div key="content-1" className="my-slide secondary">
		<h2>It's just a couple of new styles...</h2>
		</div>
		<div key="content-2" className="my-slide content">
		<p>...and the carousel can be used to present something!</p>
		</div>
		<div key="content-3" className="my-slide content">
		<img src="/assets/meme.png" />
		</div>
		<div key="content-4" className="my-slide content">
		<p>See the <a href="./examples/presentation/presentation.scss">source code</a>...</p>
		</div>
		<div key="content-5" className="my-slide secondary complex">
		<h2>It supports:</h2>
		<ul>
		<li>Headers (h1 - h6)</li>
		<li>Paragraphs (p)</li>
		<li>Images and videos (Youtube, Vimeo)</li>
		<li>Lists
		<ol>
		<li>Ordered lists (ol)</li>
		<li>Bullet points (ul)</li>
		</ol>
		</li>
		</ul>
		</div>
		<div key="content-5" className="my-slide secondary complex">
		<h2>Pre baked slides:</h2>
		<ul>
		<li>Primary - for titles</li>
		<li>Secondary - for subtitles</li>
		<li>Content</li>
		</ul>
		</div>
		<div key="content-6" className="my-slide content">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/n0F6hSpxaFc" />
		</div>
		<div key="content-6" className="my-slide content">
		<iframe src="https://player.vimeo.com/video/105955605" width="640" height="360" />
		</div>
		<div key="content-7" className="my-slide primary">
		<h1>Lorem Ipsum</h1>
		</div>
		<div key="content-8" className="my-slide secondary">
		<h2>What is Lorem Ipsum?</h2>
		</div>
		<div key="content-9" className="my-slide content">
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the <strong>1500s</strong>, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
		</div>
		<div key="content-10" className="my-slide content">
		<blockquote>It has survived not only <em>five centuries</em>, but also the leap into electronic typesetting, remaining essentially unchanged. </blockquote>
		</div>
		<div key="content-11" className="my-slide content">
		<p>It was popularised in the <strong>1960s</strong> with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		</div>
		<div key="content-12" className="my-slide secondary">
		<h2>Where does it come from?</h2>
		</div>
		<div key="content-13" className="my-slide content">
		<p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
		</div>
		<div key="content-14" className="my-slide content">
		<p>It has roots in a piece of classical Latin literature from <strong>45 BC</strong>, making it over <strong>2000</strong> years old.</p>
		</div>
		<div key="content-19" className="my-slide primary">
		<h1>Thanks...</h1>
		</div>
		<div key="content-0" className="my-slide primary">
		<h1>Presentation mode</h1>
		</div>
		<div key="content-1" className="my-slide secondary">
		<h2>It's just a couple of new styles...</h2>
		</div>
		<div key="content-2" className="my-slide content">
		<p>...and the carousel can be used to present something!</p>
		</div>
		<div key="content-3" className="my-slide content">
		<img src="/assets/meme.png" />
		</div>
		<div key="content-4" className="my-slide content">
		<p>See the <a href="./examples/presentation/presentation.scss">source code</a>...</p>
		</div>
		<div key="content-5" className="my-slide secondary complex">
		<h2>It supports:</h2>
		<ul>
		<li>Headers (h1 - h6)</li>
		<li>Paragraphs (p)</li>
		<li>Images and videos (Youtube, Vimeo)</li>
		<li>Lists
		<ol>
		<li>Ordered lists (ol)</li>
		<li>Bullet points (ul)</li>
		</ol>
		</li>
		</ul>
		</div>
		<div key="content-5" className="my-slide secondary complex">
		<h2>Pre baked slides:</h2>
		<ul>
		<li>Primary - for titles</li>
		<li>Secondary - for subtitles</li>
		<li>Content</li>
		</ul>
		</div>
		<div key="content-6" className="my-slide content">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/n0F6hSpxaFc" />
		</div>
		<div key="content-6" className="my-slide content">
		<iframe src="https://player.vimeo.com/video/105955605" width="640" height="360" />
		</div>
		<div key="content-7" className="my-slide primary">
		<h1>Lorem Ipsum</h1>
		</div>
		<div key="content-8" className="my-slide secondary">
		<h2>What is Lorem Ipsum?</h2>
		</div>
		<div key="content-9" className="my-slide content">
		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the <strong>1500s</strong>, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
		</div>
		<div key="content-10" className="my-slide content">
		<blockquote>It has survived not only <em>five centuries</em>, but also the leap into electronic typesetting, remaining essentially unchanged. </blockquote>
		</div>
		<div key="content-11" className="my-slide content">
		<p>It was popularised in the <strong>1960s</strong> with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		</div>
		<div key="content-12" className="my-slide secondary">
		<h2>Where does it come from?</h2>
		</div>
		<div key="content-13" className="my-slide content">
		<p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
		</div>
		<div key="content-14" className="my-slide content">
		<p>It has roots in a piece of classical Latin literature from <strong>45 BC</strong>, making it over <strong>2000</strong> years old.</p>
		</div>
		<div key="content-19" className="my-slide primary">
		<h1>Thanks...</h1>
		</div>
		</Carousel>
		), { source: true, inline: true, propTables: false});

.babelrc

Sorry, the diff of this file is not supported yet

react-responsive-carousel - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes