20 | {Array.from(new Array(bullets), (x, i) => i + 1).map(i => {
21 | return (
22 |
28 | );
29 | })}
30 |
31 | );
32 | };
33 |
34 | Paginator.propTypes = {
35 | activeIndex: PropTypes.number,
36 | bullets: PropTypes.number.isRequired,
37 | onClick: PropTypes.func
38 | };
39 |
40 | export default Paginator;
41 |
--------------------------------------------------------------------------------
/src/Slider.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import PropTypes from 'prop-types';
4 |
5 | import React, { Component } from 'react';
6 |
7 | import Item from './Item';
8 | import Paginator from './Paginator';
9 | import scrollToY from 'scroll-to-y';
10 |
11 | export default class Slider extends Component {
12 | constructor(props) {
13 | super(props);
14 |
15 | this.state = { activeIndex: 1 };
16 |
17 | this.setActive = this.setActive.bind(this);
18 | this.handleScroll = this.handleScroll.bind(this);
19 | this.lastScroll = 0;
20 |
21 | window.addEventListener('scroll', this.handleScroll);
22 | }
23 |
24 | componentWillUnmount() {
25 | window.removeEventListener('scroll', this.handleScroll);
26 | }
27 |
28 | handleScroll() {
29 | if (this.isAnimating) {
30 | return;
31 | }
32 |
33 | const { activeIndex } = this.state;
34 |
35 | // up
36 | if (
37 | window.scrollY > this.lastScroll &&
38 | window.innerHeight + window.scrollY >
39 | window.innerHeight * activeIndex + window.innerHeight / 2
40 | ) {
41 | this.setActive(activeIndex + 1);
42 | // down
43 | } else if (
44 | window.scrollY < this.lastScroll &&
45 | window.innerHeight + window.scrollY <
46 | window.innerHeight * activeIndex - window.innerHeight / 1.5
47 | ) {
48 | this.setActive(activeIndex - 1);
49 | }
50 |
51 | this.lastScroll = window.scrollY;
52 | }
53 |
54 | setActive(index, scrollTo) {
55 | this.setState({ activeIndex: index }, () => {
56 | if (scrollTo) {
57 | this.isAnimating = true;
58 | scrollToY(
59 | this.refs[`slide-${index}`].offsetTop,
60 | 500,
61 | 'easeInOutQuint',
62 | () => {
63 | this.isAnimating = false;
64 | }
65 | );
66 | }
67 | });
68 | }
69 |
70 | render() {
71 | const { children } = this.props;
72 | const { activeIndex } = this.state;
73 |
74 | if (!children) {
75 | return null;
76 | }
77 |
78 | return (
79 |
80 |
85 |
86 | {children.map((child, key) => {
87 | let index = key + 1;
88 |
89 | return (
90 |
91 | {React.cloneElement(child, {
92 | index,
93 | hideButton: index === children.length,
94 | onClick: this.setActive
95 | })}
96 |
97 | );
98 | })}
99 |