Skip to content

Commit e12240d

Browse files
author
patricktr
committed
update documentation
1 parent e271992 commit e12240d

File tree

4 files changed

+67
-64
lines changed

4 files changed

+67
-64
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22

33
# [1.2.0](https://github.com/patricktran/react-magic-slider-dots/compare/v1.1.3...v.1.2.0) (2019-09-10)
44

5-
Support for responsive breakpoints from react-slick
5+
Limited support for responsive breakpoints from react-slick
6+
Reported react-slick breakpoint issue: https://github.com/akiran/react-slick/issues/1642
67

78
<a name="1.1.3"></a>
89

‎README.md

Lines changed: 63 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
# react-magic-slider-dots
22

33
> React Magic Slider Dots Component for React Slick Carousel
4-
##### *Inspired by Instagram*
4+
5+
##### _Inspired by Instagram_
56

67
[![NPM](https://img.shields.io/npm/v/react-magic-slider-dots.svg)](https://www.npmjs.com/package/react-magic-slider-dots) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
78

@@ -14,6 +15,7 @@ npm install --save react-magic-slider-dots
1415
```
1516

1617
⚠️ Also install react-slick and slick-carousel for css and font [React Slick Documentation](https://github.com/akiran/react-slick)
18+
1719
```bash
1820
npm install slick-carousel
1921
npm install react-slick --save
@@ -26,72 +28,72 @@ import "slick-carousel/slick/slick-theme.css";
2628
## Usage
2729

2830
```jsx
29-
import React, { Component } from 'react'
30-
import Slider from 'react-slick';
31-
import 'slick-carousel/slick/slick.css';
32-
import 'slick-carousel/slick/slick-theme.css';
33-
34-
import MagicSliderDots from 'react-magic-slider-dots';
35-
import 'react-magic-slider-dots/magic-dots.css';
36-
37-
class App extends Component {
38-
39-
render() {
40-
41-
const settings = {
42-
dots: true,
43-
arrows: true,
44-
infinite: false,
45-
speed: 500,
46-
slidesToShow: 1,
47-
slidesToScroll: 1,
48-
appendDots: (dots) => {
49-
return <MagicSliderDots dots={dots} numDotsToShow={4} dotWidth={30} />
50-
}
51-
};
52-
53-
return (<Slider {...settings}>
54-
<div>
55-
<h3>1</h3>
56-
</div>
57-
<div>
58-
<h3>2</h3>
59-
</div>
60-
<div>
61-
<h3>3</h3>
62-
</div>
63-
<div>
64-
<h3>4</h3>
65-
</div>
66-
<div>
67-
<h3>5</h3>
68-
</div>
69-
<div>
70-
<h3>6</h3>
71-
</div>
72-
<div>
73-
<h3>7</h3>
74-
</div>
75-
<div>
76-
<h3>8</h3>
77-
</div>
78-
</Slider>)
79-
}
80-
}
31+
import React, { Component } from 'react';
32+
import Slider from 'react-slick';
33+
import 'slick-carousel/slick/slick.css';
34+
import 'slick-carousel/slick/slick-theme.css';
35+
36+
import MagicSliderDots from 'react-magic-slider-dots';
37+
import 'react-magic-slider-dots/dist/magic-dots.css';
38+
39+
class App extends Component {
40+
render() {
41+
const settings = {
42+
dots: true,
43+
arrows: true,
44+
infinite: false,
45+
speed: 500,
46+
slidesToShow: 1,
47+
slidesToScroll: 1,
48+
appendDots: dots => {
49+
return <MagicSliderDots dots={dots} numDotsToShow={4} dotWidth={30} />;
50+
}
51+
};
52+
53+
return (
54+
<Slider {...settings}>
55+
<div>
56+
<h3>1</h3>
57+
</div>
58+
<div>
59+
<h3>2</h3>
60+
</div>
61+
<div>
62+
<h3>3</h3>
63+
</div>
64+
<div>
65+
<h3>4</h3>
66+
</div>
67+
<div>
68+
<h3>5</h3>
69+
</div>
70+
<div>
71+
<h3>6</h3>
72+
</div>
73+
<div>
74+
<h3>7</h3>
75+
</div>
76+
<div>
77+
<h3>8</h3>
78+
</div>
79+
</Slider>
80+
);
81+
}
82+
}
8183
```
8284

8385
### API
8486

8587
This a list of props that you can pass down to the component:
8688

87-
| Property | Description | Default value | Type | Required |
88-
| -------- | ----------- | ------------- | ---- | -------- |
89-
| `dots` | array of HTML li elements representing the slider dot | | array | yes
90-
| `numDotsToShow` | number of slider dots to show | | number | yes
91-
| `dotWidth` | width, in pixels, of a slider dot including any margins/padding | | number | yes
92-
| `dotContainerClassName` | class name of parent div | `magic-dots slick-dots` | string |
93-
| `activeDotClassName` | class name of active slider dot | `slick-active` | string |
94-
| `prevNextDotClassName` | class name of left-most (prev) and right-most (next) slider dot. | `small` | string |
89+
| Property | Description | Default value | Type | Required |
90+
| ----------------------- | ---------------------------------------------------------------- | ----------------------- | ------ | -------- |
91+
| `dots` | array of HTML li elements representing the slider dot | | array | yes |
92+
| `numDotsToShow` | number of slider dots to show | | number | yes |
93+
| `dotWidth` | width, in pixels, of a slider dot including any margins/padding | | number | yes |
94+
| `dotContainerClassName` | class name of parent div | `magic-dots slick-dots` | string |
95+
| `activeDotClassName` | class name of active slider dot | `slick-active` | string |
96+
| `prevNextDotClassName` | class name of left-most (prev) and right-most (next) slider dot. | `small` | string |
9597

9698
## License
9799

‎example/src/App.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export default class App extends Component {
9393
import 'slick-carousel/slick/slick.css';
9494
import 'slick-carousel/slick/slick-theme.css';
9595
import MagicSliderDots from 'react-magic-slider-dots';
96-
import 'react-magic-slider-dots/magic-dots.css';
96+
import 'react-magic-slider-dots/dist/magic-dots.css';
9797
9898
class App extends Component {
9999

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-magic-slider-dots",
3-
"version": "1.2.0-beta.0",
3+
"version": "1.2.0",
44
"description": "React Magic Slider Dots Component for React Slick Carousel. Inspired by Instagram.",
55
"author": "patricktran",
66
"license": "MIT",

0 commit comments

Comments
 (0)