前端效果ᅳ1、react实现时间上下轮播特效_react-horizontal timeline

1、效果展示

2、代码

import React from 'react';
import Swiper from 'swiper';
//引入swiper 样式
import 'swiper/dist/css/swiper.min.css';
import 'swiper/dist/js/maps/swiper.jquery.min.js.map'
//引入样式
import './index.css'
// import './swiper.min.css'
class Timeline extends React.Component {
    componentDidMount() {
        new Swiper('.swiper-container', {
                direction: 'vertical',
                loop: false,
                speed: 1600,
                mousewheelControl : true,
                pagination: '.swiper-pagination',
                paginationBulletRender: function (swiper, index, className) {
                    var year = document.querySelectorAll('.swiper-slide')[index].getAttribute('data-year');
                    return '<span class="' + className + '">' + year + '</span>';
                },
                // autoplay: {
                //     delay: 300000, // 每隔3秒自动播放一次
                //     disableOnInteraction: false, // 用户交互后不停止自动播放
                // },
                paginationClickable: true,
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
                breakpoints: {
                    768: {
                        direction: 'horizontal',
                    }
                }
            }
        );
    }

    render() {
        return (
            <div className="container">
                <div className="timeline">
                    <div className="swiper-container">
                        <div className="swiper-wrapper">
                            <div className="swiper-slide" style={{ backgroundImage: `url(${require('./images/01.jpg')})` }} data-year="2014">
                                <div className="swiper-slide-content">
                                    <span className="timeline-year">2014</span>
                                    <h4 className="timeline-title">Our nice super title</h4>
                                    <p className="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                            </div>
                            <div className="swiper-slide" style={{ backgroundImage: `url(${require('./images/02.jpg')})`}} data-year="2016">
                                <div className="swiper-slide-content"><span className="timeline-year">2016</span>
                                    <h4 className="timeline-title">Our nice super title</h4>
                                    <p className="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                            </div>
                            <div className="swiper-slide" style={{ backgroundImage: `url(${require('./images/03.jpg')})`}} data-year="2017">
                                <div className="swiper-slide-content"><span className="timeline-year">2017</span>
                                    <h4 className="timeline-title">Our nice super title</h4>
                                    <p className="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                            </div>
                            <div className="swiper-slide" style={{ backgroundImage: `url(${require('./images/04.jpg')})`}} data-year="2018">
                                <div className="swiper-slide-content"><span className="timeline-year">2018</span>
                                    <h4 className="timeline-title">Our nice super title</h4>
                                    <p className="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                            </div>
                            <div className="swiper-slide" style={{ backgroundImage: `url(${require('./images/05.jpg')})`}} data-year="2019">
                                <div className="swiper-slide-content"><span className="timeline-year">2019</span>
                                    <h4 className="timeline-title">Our nice super title</h4>
                                    <p className="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                            </div>
                            <div className="swiper-slide" style={{ backgroundImage: `url(${require('./images/06.jpg')})`}} data-year="2020">
                                <div className="swiper-slide-content"><span className="timeline-year">2020</span>
                                    <h4 className="timeline-title">Our nice super title</h4>
                                    <p className="timeline-text">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                            </div>
                            {/* ...其他幻灯片 */}
                        </div>
                        <div className="swiper-button-prev"></div>
                        <div className="swiper-button-next"></div>
                        <div className="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Timeline;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93