Created
December 5, 2017 19:37
-
-
Save SergProduction/df1d47b3dca0b0989f6d6367984f88c9 to your computer and use it in GitHub Desktop.
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
| import React, { Component } from 'react' | |
| import PropTypes from 'prop-types' | |
| import styled from 'styled-components' | |
| class Carousel extends Component { | |
| static propTypes = { | |
| banners: PropTypes.arrayOf(PropTypes.shape({ | |
| img: PropTypes.string, | |
| link: PropTypes.string, | |
| })).isRequired | |
| } | |
| state = { | |
| containerWidth: 0, | |
| slideCurrent: 0, | |
| } | |
| componentDidMount = () => { | |
| this.setWidth() | |
| window.addEventListener('resize', this.onResize) | |
| } | |
| componentWillUnmount = () => { | |
| window.removeEventListener('resize', this.onResize) | |
| } | |
| onResize = (e) => { | |
| this.setWidth() | |
| } | |
| setWidth = () => { | |
| const param = this.containerElement.getBoundingClientRect() | |
| this.setState({ containerWidth: param.width }) | |
| } | |
| getWidthStyle = () => { | |
| const { containerWidth } = this.state | |
| return containerWidth | |
| ? { width: `${containerWidth}px` } | |
| : {} | |
| } | |
| getNegativeMarginStyle = (multilpy) => { | |
| const { containerWidth } = this.state | |
| const left = Number.isInteger(multilpy) | |
| ? containerWidth * multilpy | |
| : containerWidth | |
| return containerWidth | |
| ? { marginLeft: `${-left}px` } | |
| : {} | |
| } | |
| slide = sign => (e) => { | |
| const { banners } = this.props | |
| const circleCount = (z, min, max) => { | |
| if (z < min) return max | |
| if (z > max) return min | |
| return z | |
| } | |
| this.setState(prevState => ({ | |
| slideCurrent: circleCount(prevState.slideCurrent + sign, 0, banners.length - 1) | |
| })) | |
| } | |
| render() { | |
| const { className, banners } = this.props | |
| const { slideCurrent } = this.state | |
| if (!banners.length) { | |
| return null | |
| } | |
| return ( | |
| <div className={className} ref={wrap => this.containerElement = wrap}> | |
| <div role="button" onClick={this.slide(-1)} className="swipe swipe--left"> | |
| <div className="arrow arrow--left" /> | |
| </div> | |
| <div className="carousel"> | |
| <ul style={this.getNegativeMarginStyle(slideCurrent)}> | |
| {banners.map(ban => ( | |
| <li style={this.getWidthStyle()} key={ban.link}> | |
| <a href={ban.link} className="carousel-link" key={ban.link}> | |
| <img src={ban.img} alt="" className="carousel-img" /> | |
| </a> | |
| </li> | |
| ))} | |
| </ul> | |
| </div> | |
| <div role="button" onClick={this.slide(1)} className="swipe swipe--right"> | |
| <div className="arrow arrow--right" /> | |
| </div> | |
| </div> | |
| ) | |
| } | |
| } | |
| export default styled(Carousel)` | |
| display: flex; | |
| align-items: stretch; | |
| position: relative; | |
| .carousel { | |
| overflow: hidden; | |
| } | |
| .carousel > ul { | |
| width: 9999px; | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| transition: margin-left 250ms; | |
| } | |
| .carousel > ul > li{ | |
| display: inline-block; | |
| } | |
| .carousel-img { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .swipe { | |
| position: absolute; | |
| width: 40px; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: ${({ theme }) => theme.second}; | |
| opacity: 0; | |
| cursor: pointer; | |
| transition: opacity .15s; | |
| &--right { | |
| right: 0; | |
| } | |
| &--left { | |
| left: 0; | |
| } | |
| &:hover { | |
| opacity: 0.8; | |
| } | |
| } | |
| .arrow { | |
| border: 3px solid #fff; | |
| width: 15px; | |
| height: 15px; | |
| transform: rotate(45deg); | |
| &--left { | |
| border-style: none none solid solid; | |
| } | |
| &--right { | |
| border-style: solid solid none none; | |
| } | |
| } | |
| ` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment