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
|
import React from 'react';
import Type from 'ba-styles/Typography.scss';
import Slider from 'react-animated-slider';
import 'ba-styles/vendors/react-animated-slider/react-animated-slider.css';
import imgApi from 'ba-api/images';
import avatarApi from 'ba-api/avatars';
import { Button, Typography } from '@material-ui/core';
const content = [
{
title: 'Vulputate Mollis Ultricies',
description:
'Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
button: 'Read More',
image: imgApi[3],
user: 'Luanda Gjokaj',
userProfile: avatarApi[1]
},
{
title: 'Tortor Dapibus',
description:
'Cras mattis consectetur purus sit amet fermentum.',
button: 'Discover',
image: imgApi[15],
user: 'Erich Behrens',
userProfile: avatarApi[8]
},
{
title: 'Phasellus volutpat',
description:
'Lorem ipsum dolor sit amet',
button: 'Buy now',
image: imgApi[29],
user: 'Bruno Vizovskyy',
userProfile: avatarApi[10]
}
];
const SliderWidget = () => (
<div>
<Slider className="slider-wrapper short" autoplay={3000}>
{content.map((item, index) => (
<div
key={index.toString()}
className="slider-content"
style={{ background: `url('${item.image}') no-repeat center center` }}
>
<div className="inner">
<Typography variant="subtitle1" component="h3" className={Type.light} gutterBottom>{item.title}</Typography>
<Button variant="contained" color="primary">
{item.button}
</Button>
</div>
<section>
<img src={item.userProfile} alt={item.user} />
<span>
Posted by
{' '}
<strong>{item.user}</strong>
</span>
</section>
</div>
))}
</Slider>
</div>
);
export default SliderWidget;
|
