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 '' + year + '';                 },                 // autoplay: {                 //     delay: 300000, // 每隔3秒自动播放一次                 //     disableOnInteraction: false, // 用户交互后不停止自动播放                 // },                 paginationClickable: true,                 nextButton: '.swiper-button-next',                 prevButton: '.swiper-button-prev',                 breakpoints: {                     768: {                         direction: 'horizontal',                     }                 }             }         );     }      render() {         return (             
                 
                     
                         
                             
{ backgroundImage: `url(${require('./images/01.jpg')})` }} data-year="2014">                                 
                                     2014                                     
Our nice super title
                                     
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.
                                 
                             
                             
{ backgroundImage: `url(${require('./images/02.jpg')})`}} data-year="2016">                                 
2016                                     
Our nice super title
                                     
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.
                                 
                             
                             
{ backgroundImage: `url(${require('./images/03.jpg')})`}} data-year="2017">                                 
2017                                     
Our nice super title
                                     
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.
                                 
                             
                             
{ backgroundImage: `url(${require('./images/04.jpg')})`}} data-year="2018">                                 
2018                                     
Our nice super title
                                     
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.
                                 
                             
                             
{ backgroundImage: `url(${require('./images/05.jpg')})`}} data-year="2019">                                 
2019                                     
Our nice super title
                                     
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.
                                 
                             
                             
{ backgroundImage: `url(${require('./images/06.jpg')})`}} data-year="2020">                                 
2020                                     
Our nice super title
                                     
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.
                                 
                             
                             {/* ...其他幻灯片 */}                         
                         
                         
                         
                     
                 
             
         );     } }  export default Timeline;