1.1.1 • Published 3 years ago
asteroid-card-slider v1.1.1
asteroid-card-slider
Getting Started
$ npm install asteroid-card-slider --save
Usage
ES2015+ environments
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
<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 : [])