前端效果ᅳ1、react实现时间上下轮播特效
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 '+ className + '">' + 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;
