Skip to content

Commit 822b6f7

Browse files
msluthermsluther
committed
[dist] 1.6.0
1 parent 9fe8ddb commit 822b6f7

File tree

5 files changed

+153
-149
lines changed

5 files changed

+153
-149
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
# 1.6.0 - Feb 2020
2+
3+
***(FEATURE)*** Add `onSlideTransitioned` callback and updated `arrows` prop to support custom arrows
4+
15
# 1.5.4 - Nov 2019
26

37
***(Enhancement)*** Replaced example application with Storybook

‎package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-img-carousel",
3-
"version": "1.5.4",
3+
"version": "1.6.0",
44
"description": "Provides an image carousel React component.",
55
"main": "lib/index.js",
66
"repository": {

‎src/index.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -283,12 +283,12 @@ export default class Carousel extends Component {
283283
goToSlide(index, direction, autoSlide = false) {
284284
const { beforeChange, transitionDuration, transition, onSlideTransitioned } = this.props;
285285

286-
if(onSlideTransitioned) {
287-
onSlideTransitioned({
288-
autoPlay: autoSlide,
289-
index,
290-
direction
291-
});
286+
if (onSlideTransitioned) {
287+
onSlideTransitioned({
288+
autoPlay: autoSlide,
289+
index,
290+
direction
291+
});
292292
}
293293

294294
const { currentSlide } = this.state;

‎src/stories/index.stories.js

Lines changed: 141 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -3,164 +3,164 @@ import Carousel from '../index';
33

44
require('../carousel.less');
55

6-
export default {
7-
component: Carousel,
8-
title: 'Carousel'
6+
export default {
7+
component: Carousel,
8+
title: 'Carousel'
99
};
1010

1111
const IMAGES = [
12-
'http://picsum.photos/400/300',
13-
'http://picsum.photos/275/300',
14-
'http://picsum.photos/400/300',
15-
'http://picsum.photos/350/300',
16-
'http://picsum.photos/250/300',
17-
'http://picsum.photos/375/300',
18-
'http://picsum.photos/425/300',
19-
'http://picsum.photos/325/300'
20-
];
12+
'http://picsum.photos/400/300',
13+
'http://picsum.photos/275/300',
14+
'http://picsum.photos/400/300',
15+
'http://picsum.photos/350/300',
16+
'http://picsum.photos/250/300',
17+
'http://picsum.photos/375/300',
18+
'http://picsum.photos/425/300',
19+
'http://picsum.photos/325/300'
20+
];
2121

2222
const imgElements = IMAGES.map((image, index) => <img src={ image } key={ index } />);
2323

2424
const CustomDots = ({ numSlides, selectedIndex, goToSlide, title }) => {
25-
const dots = [];
26-
27-
for (let index = 0; index < numSlides; index++) {
28-
const buttonStyle = {
29-
border: 'none',
30-
cursor: 'pointer',
31-
background: 'transparent'
32-
};
33-
34-
if (index === selectedIndex) {
35-
buttonStyle.color = 'red';
36-
}
37-
38-
dots.push(
39-
<li key={ `dot-${index}` } style={ { display: 'inline-block' } }>
40-
<button style={ buttonStyle } onClick={ goToSlide.bind(null, index) }>•</button>
41-
</li>
42-
);
25+
const dots = [];
26+
27+
for (let index = 0; index < numSlides; index++) {
28+
const buttonStyle = {
29+
border: 'none',
30+
cursor: 'pointer',
31+
background: 'transparent'
32+
};
33+
34+
if (index === selectedIndex) {
35+
buttonStyle.color = 'red';
4336
}
4437

45-
return (
46-
<div style={ { position: 'absolute', top: '10px', right: '10px', background: 'rgba(114, 114, 114, 0.6)', zIndex: '1' } }>
47-
<h2>{ title }</h2>
48-
<ul style={ { listStyle: 'none', padding: '0' } }>
49-
{ dots }
50-
</ul>
51-
</div>
38+
dots.push(
39+
<li key={ `dot-${index}` } style={{ display: 'inline-block' }}>
40+
<button style={ buttonStyle } onClick={ goToSlide.bind(null, index) }>•</button>
41+
</li>
5242
);
53-
}
43+
}
44+
45+
return (
46+
<div style={{ position: 'absolute', top: '10px', right: '10px', background: 'rgba(114, 114, 114, 0.6)', zIndex: '1' }}>
47+
<h2>{ title }</h2>
48+
<ul style={{ listStyle: 'none', padding: '0' }}>
49+
{ dots }
50+
</ul>
51+
</div>
52+
);
53+
};
5454

55-
export const infiniteWithCellPadding = () =>
56-
<Carousel width='450px' cellPadding={ 5 }>
57-
{ imgElements }
58-
</Carousel>
55+
export const infiniteWithCellPadding = () =>
56+
<Carousel width='450px' cellPadding={ 5 }>
57+
{ imgElements }
58+
</Carousel>;
5959

6060
export const nonInfiniteWithCellPadding = () =>
61-
<Carousel infinite={ false } width='450px' cellPadding={ 5 }>
62-
{ imgElements }
63-
</Carousel>
64-
65-
export const fadeTransition = () =>
66-
<Carousel
67-
width='450px'
68-
slideHeight='300px'
69-
transitionDuration={ 1000 }
70-
draggable={ false }
71-
transition='fade'
72-
>
73-
{ imgElements }
74-
</Carousel>
61+
<Carousel infinite={ false } width='450px' cellPadding={ 5 }>
62+
{ imgElements }
63+
</Carousel>;
64+
65+
export const fadeTransition = () =>
66+
<Carousel
67+
width='450px'
68+
slideHeight='300px'
69+
transitionDuration={ 1000 }
70+
draggable={ false }
71+
transition='fade'
72+
>
73+
{ imgElements }
74+
</Carousel>;
7575

7676
export const infiniteWithOnly2Slides = () =>
77-
<Carousel width='450px' arrows={ false } slideHeight='300px'>
78-
<img src='http://picsum.photos/325/300'/>
79-
<img src='http://picsum.photos/350/300'/>
80-
</Carousel>
81-
82-
export const infiniteWithOnly1Slide = () =>
83-
<Carousel
84-
width='450px'
85-
infinite={ true }
86-
arrows={ false }
87-
dots={ false }
88-
>
89-
<img src='http://picsum.photos/325/300'/>
90-
</Carousel>
91-
92-
export const autoplayWithBackgroundImages = () =>
93-
<Carousel
94-
width='100%'
95-
slideWidth='100%'
96-
slideHeight='70vh'
97-
arrows={ false }
98-
autoplay={ true }
99-
>
100-
<div style={ { backgroundImage: 'url(http://picsum.photos/600/300)', backgroundSize: 'cover', height: '100%', width: '100%' } }/>
101-
<div style={ { backgroundImage: 'url(http://picsum.photos/650/300)', backgroundSize: 'cover', height: '100%', width: '100%' } }/>
102-
<div style={ { backgroundImage: 'url(http://picsum.photos/675/300)', backgroundSize: 'cover', height: '100%', width: '100%' } }/>
103-
<div style={ { backgroundImage: 'url(http://picsum.photos/700/300)', backgroundSize: 'cover', height: '100%', width: '100%' } }/>
104-
</Carousel>
105-
106-
export const backgroundImagesWithFade = () =>
107-
<Carousel
108-
width='100%'
109-
slideWidth='100%'
110-
slideHeight='70vh'
111-
transition='fade'
112-
transitionDuration={ 1000 }
113-
autoplay={ true }
114-
arrows={ true }
115-
>
116-
<div style={ { backgroundImage: 'url(http://picsum.photos/600/300)', backgroundSize: 'cover', height: '100%', width: '100%' } }/>
117-
<div style={ { backgroundImage: 'url(http://picsum.photos/650/300)', backgroundSize: 'cover', height: '100%', width: '100%' } }/>
118-
<div style={ { backgroundImage: 'url(http://picsum.photos/675/300)', backgroundSize: 'cover', height: '100%', width: '100%' } }/>
119-
<div style={ { backgroundImage: 'url(http://picsum.photos/700/300)', backgroundSize: 'cover', height: '100%', width: '100%' } }/>
120-
<div style={ { backgroundImage: 'url(http://picsum.photos/750/300)', backgroundSize: 'cover', height: '100%', width: '100%' } }/>
121-
<div style={ { backgroundImage: 'url(http://picsum.photos/725/300)', backgroundSize: 'cover', height: '100%', width: '100%' } }/>
122-
<div style={ { backgroundImage: 'url(http://picsum.photos/625/300)', backgroundSize: 'cover', height: '100%', width: '100%' } }/>
123-
</Carousel>
124-
125-
export const customDotsComponent = () =>
126-
<Carousel
127-
width='450px'
128-
cellPadding={ 5 }
129-
infinite={ false }
130-
dots={ false }
131-
arrows={ false }
132-
autoplay={ true }
133-
controls={ [{ component: CustomDots, props: { title: 'My Slides' }, position: 'top' }] }
134-
transitionDuration={ 0 }
135-
>
136-
{ imgElements }
137-
</Carousel>
77+
<Carousel width='450px' arrows={ false } slideHeight='300px'>
78+
<img src='http://picsum.photos/325/300'/>
79+
<img src='http://picsum.photos/350/300'/>
80+
</Carousel>;
81+
82+
export const infiniteWithOnly1Slide = () =>
83+
<Carousel
84+
width='450px'
85+
infinite={ true }
86+
arrows={ false }
87+
dots={ false }
88+
>
89+
<img src='http://picsum.photos/325/300'/>
90+
</Carousel>;
91+
92+
export const autoplayWithBackgroundImages = () =>
93+
<Carousel
94+
width='100%'
95+
slideWidth='100%'
96+
slideHeight='70vh'
97+
arrows={ false }
98+
autoplay={ true }
99+
>
100+
<div style={{ backgroundImage: 'url(http://picsum.photos/600/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
101+
<div style={{ backgroundImage: 'url(http://picsum.photos/650/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
102+
<div style={{ backgroundImage: 'url(http://picsum.photos/675/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
103+
<div style={{ backgroundImage: 'url(http://picsum.photos/700/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
104+
</Carousel>;
105+
106+
export const backgroundImagesWithFade = () =>
107+
<Carousel
108+
width='100%'
109+
slideWidth='100%'
110+
slideHeight='70vh'
111+
transition='fade'
112+
transitionDuration={ 1000 }
113+
autoplay={ true }
114+
arrows={ true }
115+
>
116+
<div style={{ backgroundImage: 'url(http://picsum.photos/600/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
117+
<div style={{ backgroundImage: 'url(http://picsum.photos/650/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
118+
<div style={{ backgroundImage: 'url(http://picsum.photos/675/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
119+
<div style={{ backgroundImage: 'url(http://picsum.photos/700/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
120+
<div style={{ backgroundImage: 'url(http://picsum.photos/750/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
121+
<div style={{ backgroundImage: 'url(http://picsum.photos/725/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
122+
<div style={{ backgroundImage: 'url(http://picsum.photos/625/300)', backgroundSize: 'cover', height: '100%', width: '100%' }}/>
123+
</Carousel>;
124+
125+
export const customDotsComponent = () =>
126+
<Carousel
127+
width='450px'
128+
cellPadding={ 5 }
129+
infinite={ false }
130+
dots={ false }
131+
arrows={ false }
132+
autoplay={ true }
133+
controls={ [{ component: CustomDots, props: { title: 'My Slides' }, position: 'top' }] }
134+
transitionDuration={ 0 }
135+
>
136+
{ imgElements }
137+
</Carousel>;
138138

139139
export const addImages = () => {
140-
const [images, setImages] = useState([IMAGES[0]]);
140+
const [images, setImages] = useState([IMAGES[0]]);
141141

142-
const addImage = () => {
143-
if (images.length < IMAGES.length) {
144-
setImages(images.concat(IMAGES[images.length]));
145-
}
142+
const addImage = () => {
143+
if (images.length < IMAGES.length) {
144+
setImages(images.concat(IMAGES[images.length]));
146145
}
146+
};
147147

148-
return (
149-
<Fragment>
150-
<Carousel
151-
width='450px'
152-
cellPadding={ 5 }
153-
infinite={ true }
154-
dots={ false }
155-
arrows={ false }
156-
autoplay={ false }
157-
controls={ [{ component: CustomDots, props: { title: 'My Slides' }, position: 'top' }] }
158-
>
159-
{
160-
images.map((image, index) => <img key={ index } src={ image }/>)
161-
}
162-
</Carousel>
163-
<button onClick={ addImage }>Add Image</button>
164-
</Fragment>
165-
)
166-
}
148+
return (
149+
<Fragment>
150+
<Carousel
151+
width='450px'
152+
cellPadding={ 5 }
153+
infinite={ true }
154+
dots={ false }
155+
arrows={ false }
156+
autoplay={ false }
157+
controls={ [{ component: CustomDots, props: { title: 'My Slides' }, position: 'top' }] }
158+
>
159+
{
160+
images.map((image, index) => <img key={ index } src={ image }/>)
161+
}
162+
</Carousel>
163+
<button onClick={ addImage }>Add Image</button>
164+
</Fragment>
165+
);
166+
};

0 commit comments

Comments
 (0)