62 lines
1.2 KiB
JavaScript
62 lines
1.2 KiB
JavaScript
import React from 'react'
|
|
import { render } from 'react-dom'
|
|
import TinySlider from 'tiny-slider-react'
|
|
|
|
const styles = {
|
|
fontFamily: 'sans-serif',
|
|
textAlign: 'center',
|
|
}
|
|
|
|
const imgStyles = {
|
|
width: '100%',
|
|
height: '320px',
|
|
objectFit: 'cover',
|
|
}
|
|
|
|
const imgs = [
|
|
'http://d2ji2mue1p384z.cloudfront.net/img/480x360/162951.jpg',
|
|
'http://d2ji2mue1p384z.cloudfront.net/img/480x360/162465.jpg',
|
|
'http://d2ji2mue1p384z.cloudfront.net/img/480x360/220048.jpg',
|
|
]
|
|
|
|
const loadingImage =
|
|
'data:image/gif;base64,\
|
|
R0lGODlhAQABAPAAAMzMzAAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='
|
|
|
|
const settings = {
|
|
lazyload: true,
|
|
nav: false,
|
|
mouseDrag: true,
|
|
loop: true,
|
|
items: 1,
|
|
gutter: 5,
|
|
responsive: {
|
|
420: {
|
|
items: 2,
|
|
},
|
|
},
|
|
}
|
|
|
|
const clickEvent = slide => {
|
|
console.log(slide)
|
|
}
|
|
const Tech = () => (
|
|
<div style={styles}>
|
|
<TinySlider settings={settings} onInit={clickEvent}>
|
|
{imgs.map((el, index) => (
|
|
<div key={index} style={{ position: 'relative' }}>
|
|
<img
|
|
className={`tns-lazy-img`}
|
|
src={loadingImage}
|
|
data-src={el}
|
|
alt=""
|
|
style={imgStyles}
|
|
/>
|
|
</div>
|
|
))}
|
|
</TinySlider>
|
|
</div>
|
|
)
|
|
|
|
export default Tech
|