add thumbWidth prop to allow specifying thumbnail width

add documentation for new thumbWidth prop

Author: dlong500

README.md

@@ -80,6 +80,7 @@ ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
 | showStatus            | `boolean`     | `true` | show index of the current item. i.e: (1/8) |
 | showIndicators        | `boolean`     | `true` | show little dots at the bottom with links for changing the item |
 | showThumbs            | `boolean`     | `true` | show thumbnails of the images |
+| thumbWidth            | `number`      | `undefined` | optionally specify pixel width (as an integer) of a thumbnail (including any padding) to avoid calculating values (helps with server-side renders or page cache issues) |
 | infiniteLoop          | `boolean`     | `false` | infinite loop sliding  |
 | selectedItem          | `number`      | `0` | selects an item though props / defines the initial selected item |
 | axis                  | `string`      | `horizontal` | changes orientation - accepts `horizontal` and `vertical` |

src/components/Carousel.js

@@ -22,6 +22,7 @@ class Carousel extends Component {
         showIndicators: PropTypes.bool,
         infiniteLoop: PropTypes.bool,
         showThumbs: PropTypes.bool,
+        thumbWidth: PropTypes.number,
         selectedItem: PropTypes.number,
         onClickItem: PropTypes.func.isRequired,
         onClickThumb: PropTypes.func.isRequired,
@@ -464,7 +465,7 @@ class Carousel extends Component {
         }
 
         return (
-            <Thumbs onSelectItem={this.handleClickThumb} selectedItem={this.state.selectedItem} transitionTime={this.props.transitionTime}>
+            <Thumbs onSelectItem={this.handleClickThumb} selectedItem={this.state.selectedItem} transitionTime={this.props.transitionTime} thumbWidth={this.props.thumbWidth}>
                 {this.props.children}
             </Thumbs>
         );

src/components/Thumbs.js

@@ -12,7 +12,8 @@ class Thumbs extends Component {
     static propsTypes = {
         children: PropTypes.element.isRequired,
         transitionTime: PropTypes.number,
-        selectedItem: PropTypes.number
+        selectedItem: PropTypes.number,
+        thumbWidth: PropTypes.number
     };
 
     static defaultProps = {
@@ -96,7 +97,7 @@ class Thumbs extends Component {
 
         const total = this.props.children.length;
         this.wrapperSize = this.itemsWrapper.clientWidth;
-        this.itemSize = outerWidth(this.refs.thumb0);
+        this.itemSize = this.props.thumbWidth ? this.props.thumbWidth : outerWidth(this.refs.thumb0);
         this.visibleItems = Math.floor(this.wrapperSize / this.itemSize);
         this.lastPosition = total - this.visibleItems;
         this.showArrows = this.visibleItems < total;