# asteroid-card-slider

![image](https://user-images.githubusercontent.com/49670068/113424950-f28fe600-940b-11eb-86a5-52193adae5ce.png)

## Getting Started

```bash
$ npm install asteroid-card-slider --save
```

## Usage

### ES2015+ environments

```javascript
import { Cardslider } from "asteroid-card-slider";

let cardslider = new Cardslider("slider", {
                        width: "400px",
                        images: [
                            "https://user-images.githubusercontent.com/49670068/113144366-1e726680-9268-11eb-922b-0ac1ff0aeb23.png",
                            "https://user-images.githubusercontent.com/49670068/113144366-1e726680-9268-11eb-922b-0ac1ff0aeb23.png",
                            "https://user-images.githubusercontent.com/49670068/113144366-1e726680-9268-11eb-922b-0ac1ff0aeb23.png",
                            "https://user-images.githubusercontent.com/49670068/113144366-1e726680-9268-11eb-922b-0ac1ff0aeb23.png"
                        ]
                    });
```

### Script src
```html
<script src="./dist/main.js"></script>
<div id="slider">
</div>
<script>
    //DOM LOADED => Handler Call
    document.addEventListener("DOMContentLoaded", function () {
        let slider = new asteroid.Cardslider("slider", {
            width: "400px",
            images: [
                "https://user-images.githubusercontent.com/49670068/113144366-1e726680-9268-11eb-922b-0ac1ff0aeb23.png",
                "https://user-images.githubusercontent.com/49670068/113144366-1e726680-9268-11eb-922b-0ac1ff0aeb23.png",
                "https://user-images.githubusercontent.com/49670068/113144366-1e726680-9268-11eb-922b-0ac1ff0aeb23.png",
                "https://user-images.githubusercontent.com/49670068/113144366-1e726680-9268-11eb-922b-0ac1ff0aeb23.png"
            ]
        });
    });
</script>
```

### Available Options
- width : cardslider Width (type : string , default : "360px")
- height : cardslider Height (type : string , default : "150px")
- isPoint : point visible (type : boolean , default : true)
- images : images url list (type : array , default : [])