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 : [])