1.0.1 • Published 3 years ago

carousel-stencil-js v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

Stencil Component Standard Carousel

Carousel with Stencil.js compatible with vue.js, react.js and Angular.js

Stencil Js 🤯

Library carousel with Stencil Js

Getting Started 🥰

npm install
npm start

To build the component for production, run:

npm run build

Component

      <my-component columns-slice="2"
                    duration-slice="3000"
                    interval-slice="6000"
                    object-data='{"title_business": "vlzdavid12", "likes": "9000"}'
                    array-data='[
        {"id": 10, "image": "", "title": "The standard Lorem Ipsum passage, used since the 1500s", "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.", "author" : "vlzdavid12@outlook.com", "counts": "122.899.00", "date": "10 months ago", "time": "9:14"},
        {"id": 9, "image": "https://cdn.pixabay.com/photo/2016/11/18/12/14/owl-1834152_960_720.jpg", "title": "1914 translation by H. Rackham", "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.", "author" : "vlzdavid12@outlook.com", "counts": "122.899.00", "date": "9 months ago", "time": "7:34"},
        {"id": 8, "image": "https://cdn.pixabay.com/photo/2015/11/16/16/28/bird-1045954_960_720.jpg", "title": "Section 1.10.32 of de Finibus Bonorum et Malorum", "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.", "author" : "vlzdavid12@outlook.com", "counts": "122.899.00", "date": "8 months ago", "time": "12:32"},
        {"id": 7, "image": "https://cdn.pixabay.com/photo/2015/01/09/11/11/office-594132_960_720.jpg", "title": "Section 1.10.32 of de Finibus Bonorum et Malorum", "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.", "author" : "vlzdavid12@outlook.com", "counts": "122.899.00", "date": "7 months ago", "time": "10:34"},
        {"id": 6, "image": "https://cdn.pixabay.com/photo/2015/01/12/05/54/haifa-597027_960_720.jpg", "title": "Section 1.10.32 of de Finibus Bonorum et Malorum", "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.", "author" : "vlzdavid12@outlook.com", "counts": "122.899.00", "date": "6 months ago", "time": "7:34"},
        {"id": 5, "image": "https://cdn.pixabay.com/photo/2014/04/13/20/49/cat-323262_960_720.jpg", "title": "El paso clásico “Lorem ipsum dolor sit amet…” ", "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.", "author" : "vlzdavid12@outlook.com", "counts": "122.899.00", "date": "5 months ago", "time": "11:34"},
        {"id": 4, "image": "https://cdn.pixabay.com/photo/2017/05/08/13/15/spring-bird-2295431_960_720.jpg", "title": "Section 1.10.32 of de Finibus Bonorum et Malorum", "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.", "author" : "vlzdavid12@outlook.com", "counts": "122.899.00", "date": "4 months ago", "time": "9:34"},
        {"id": 3, "image": "https://cdn.pixabay.com/photo/2016/11/08/05/11/children-1807511_960_720.jpg", "title": "Section 1.10.32 of de Finibus Bonorum et Malorum", "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.", "author" : "vlzdavid12@outlook.com", "counts": "122.899.00", "date": "3 months ago", "time": "7:34"},
        {"id": 2, "image": "https://cdn.pixabay.com/photo/2014/12/20/13/55/jerusalem-573956_960_720.jpg", "title": "Section 1.10.32 of de Finibus Bonorum et Malorum", "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.", "author" : "vlzdavid12@outlook.com", "counts": "122.899.00", "date": "2 months ago", "time": "8:34"},
        {"id": 1, "image": "https://cdn.pixabay.com/photo/2015/06/08/15/02/pug-801826_960_720.jpg", "title": "1914 translation by H. Rackham", "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry.", "author" : "vlzdavid12@outlook.com", "counts": "122.899.00", "date": "1 months ago", "time": "10:34"}
             ]'
      > </my-component>

alt text