This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| render() { | |
| // children will be all of our Carousel items. | |
| const deviceType = 'desktop' // presuming this deviceType is the result after our user-agent detection for the sake of simplicity. | |
| let itemWidth; | |
| const isServerSide = !this.state.domLoaded && deviceType; | |
| if (isServerSide) { | |
| itemWidth = (100 / this.state.breakpoint[deviceType].itemsToShow).toFixed(1); | |
| // we are on desktop, then the item width here will be 33.3% based // on our pre-defined breakpoint that we declared in the constructor. | |
| } else { | |
| itemWidth = this.state.containerWidth / this.state.slidesToShow; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div ref={this.containerRef}> | |
| <ul | |
| style={{ | |
| overflow: isServerSide ? "hidden" : "unset", | |
| transform: `translate3d(${this.state.transform}px,0,0)` | |
| }} | |
| > | |
| …rest of our stuff |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| componentDidMount() { | |
| this.setState({ domLoaded: true }); | |
| if(this.containerRef && this.containerRef.current) { | |
| // here we get the total width of the container | |
| this.setState({ containerWidth: this.containerRef.current.offsetWidth}); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| componentDidMount() { | |
| this.setState({ domLoaded: true }); | |
| if(this.containerRef && this.containerRef.current) { | |
| // here we get the total width of the container | |
| this.setState({ containerWidth: this.containerRef.current.offsetWidth}); | |
| } | |
| Object.keys(this.state.breakpoint).forEach(breakpoint => { | |
| const { min, max, itemsToShow } = this.state.breakpoint[breakpoint]; | |
| if(window.innerWidth >= min && window.innerWidth <= max) { | |
| this.setState({ slidesToShow: itemsToShow }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <Carousel> | |
| <img style={{ padding: 10, width: '100%' }} src='/image1' /> | |
| <img style={{ padding: 10, width: '100%' }} src='/image2' /> | |
| <img style={{ padding: 10, width: '100%' }} src='/image3' /> | |
| </Carousel> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| next(){ | |
| const { slidesToShow, slidesToSlide, containerWidth } = this.state; | |
| const itemWidth = containerWidth / slidesToShow; | |
| // the reason for the 1 is because our index starts at 0. | |
| const nextItems = this.state.currentSlide + 1 + slidesToShow; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if (nextItems <= this.state.totalItems) { | |
| // if we are not reaching the end of the Carousel. | |
| const nextCarouselPosition = | |
| -itemWidth * (this.state.currentSlide + slidesToSlide); | |
| // notice that our nextCarouselPosition will be a nagative value | |
| this.setState({ | |
| transform: nextCarouselPosition, | |
| currentSlide: this.state.currentSlide + slidesToSlide | |
| }); | |
| } else { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ul | |
| style={{ | |
| listStyle: "none", | |
| padding: 0, | |
| margin: 0, | |
| display: "flex", | |
| alignItems: "center", | |
| transition: 'all .5s', | |
| overflow: isServerSide ? "hidden" : "unset", | |
| transform: `translate3d(${this.state.transform}px,0,0)` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ul | |
| style={{ | |
| listStyle: "none", | |
| padding: 0, | |
| margin: 0, | |
| display: "flex", | |
| alignItems: "center", | |
| transition: 'all .5s', | |
| overflow: isServerSide ? "hidden" : "unset", | |
| transform: `translate3d(${this.state.transform}px,0,0)` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| previous() { | |
| const { slidesToShow, slidesToSlide, containerWidth } = this.state; | |
| const itemWidth = containerWidth / slidesToShow; | |
| const previousItems = this.state.currentSlide - slidesToSlide; | |
| if (previousItems >= 0 ) { | |
| // if we are not passing the beginning of the Carousel. | |
| const nextCarouselPosition = | |
| -itemWidth * previousItems; | |
| this.setState({ | |
| transform: nextCarouselPosition, |