diff --git a/Carousel.js b/Carousel.js index 5aea9a6..1f7aa6b 100644 --- a/Carousel.js +++ b/Carousel.js @@ -21,7 +21,8 @@ var Carousel = React.createClass({ indicatorSize: 50, inactiveIndicatorColor: '#999999', indicatorAtBottom: true, - indicatorOffset: 250, + indicatorVerticalOffset: 250, + indicatorHorizontalOffset: 0, indicatorText: '•', inactiveIndicatorText: '•', width: null, @@ -68,13 +69,13 @@ var Carousel = React.createClass({ } var indicators = [], - indicatorStyle = this.props.indicatorAtBottom ? { bottom: this.props.indicatorOffset } : { top: this.props.indicatorOffset }, + indicatorStyle = this.props.indicatorAtBottom ? { bottom: this.props.indicatorVerticalOffset } : { top: this.props.indicatorVerticalOffset }, style, position; position = { width: this.props.children.length * this.props.indicatorSpace, }; - position.left = (this.getWidth() - position.width) / 2; + position.left = this.props.indicatorHorizontalOffset + (this.getWidth() - position.width) / 2; for (var i = 0, l = this.props.children.length; i < l; i++) { if (typeof this.props.children[i] === "undefined") { @@ -83,9 +84,9 @@ var Carousel = React.createClass({ style = i === this.state.activePage ? { color: this.props.indicatorColor } : { color: this.props.inactiveIndicatorColor }; indicators.push( - { i === this.state.activePage ? this.props.indicatorText : this.props.inactiveIndicatorText } diff --git a/README.md b/README.md index ffcac25..6a0f4f4 100644 --- a/README.md +++ b/README.md @@ -14,11 +14,11 @@ indicatorSize={20} // Indicator bullet size indicatorSpace={15} // space between each indicator inactiveIndicatorColor="#999999" // Inactive indicator color indicatorAtBottom={true} // Set to false to show the indicators at the top -indicatorOffset={250} // Indicator relative position from top or bottom +indicatorVerticalOffset={250} // Indicator relative position from top or bottom +indicatorHorizontalOffset={0} // Indicator relative position from center (horizontally) onPageChange={callback} // Called when the active page changes inactiveIndicatorText= '•' // Inactive indicator content ( You can customize to use any Unicode character ) indicatorText= '•' // Active indicator content ( You can customize to use any Unicode character ) - animate={true} // Enable carousel autoplay delay={1000} // Set Animation delay between slides loop={true} // Allow infinite looped animation. Depends on Prop {...animate} set to true.