Kecap

Keyboard-driven Carousel Component Provider

Try It

Focus and press arrow key to move

Type A

1

2

3

4

5

6

7

8

9

10

Type B

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

Installation

$ npm i kecap --save

Usage

API

<kecap-a> is implemented for Type A, and <kecap-b> is implemented for Type B.

Attributes

margin - the size of the gap between an element's rows and columns
preload - number of elements to be preloaded(must be at least 1)
itemrow - the grid row size
itemcol - the grid column size
viewportrow - the viewport row size
viewportcol - the viewport column size

Examples


            <kecap-a itemrow="1" itemcol="10" viewportrow="1" viewportcol="5">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                ...
                <div>8</div>
                <div>9</div>
                <div>10</div>
            </kecap-a>


            <kecap-b itemrow="5" itemcol="5" viewportrow="3" viewportcol="3">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                ...
                <div>23</div>
                <div>24</div>
                <div>25</div>
            </kecap-b>