UNPKG

flickity-as-nav-for

Version:

Enable asNavFor for Flickity

github.com/desandro/flickity-as-nav-for

desandro/flickity-as-nav-for

128 lines (107 loc) • 3.36 kB
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>groupCells</title> <link rel="stylesheet" href="../node_modules/flickity/css/flickity.css" /> <style> .carousel { border: 1px solid; margin-bottom: 40px; } .cell { height: 200px; width: 40%; margin: 0 5px; background: #8C8; font-size: 40px; color: white; border-radius: 5px; } .cell.is-selected { background: #ED2; } .cell.is-nav-selected { background: #19F; } .carousel--nav .cell { width: 240px; height: 180px; } #carousel-c .cell { width: 28%; } #carousel-c .cell--width2 { width: 45%; } </style> </head> <body> <h1>groupCells</h1> <h2>Nav grouped</h2> <div id="carousel-a" class="carousel" data-flickity='{ "groupCells": false }'> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> <div class="cell">5</div> <div class="cell">6</div> <div class="cell">7</div> <div class="cell">8</div> <div class="cell">9</div> </div> <div id="carousel-b" class="carousel carousel--nav" data-flickity='{ "asNavFor": "#carousel-a", "groupCells": 3 }'> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> <div class="cell">5</div> <div class="cell">6</div> <div class="cell">7</div> <div class="cell">8</div> <div class="cell">9</div> </div> <h2>main grouped</h2> <div id="carousel-c" class="carousel" data-flickity='{ "groupCells": true }'> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell cell--width2">4</div> <div class="cell cell--width2">5</div> <div class="cell">6</div> <div class="cell">7</div> <div class="cell">8</div> <div class="cell">9</div> <div class="cell">10</div> <div class="cell">11</div> </div> <div id="carousel-d" class="carousel carousel--nav" data-flickity='{ "asNavFor": "#carousel-c" }'> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> <div class="cell">5</div> <div class="cell">6</div> <div class="cell">7</div> <div class="cell">8</div> <div class="cell">9</div> <div class="cell">10</div> <div class="cell">11</div> </div> <script src="../node_modules/get-size/get-size.js"></script> <script src="../node_modules/ev-emitter/ev-emitter.js"></script> <script src="../node_modules/unidragger/unidragger.js"></script> <script src="../node_modules/fizzy-ui-utils/utils.js"></script> <script src="../node_modules/flickity/js/cell.js"></script> <script src="../node_modules/flickity/js/slide.js"></script> <script src="../node_modules/flickity/js/animate.js"></script> <script src="../node_modules/flickity/js/core.js"></script> <script src="../node_modules/flickity/js/drag.js"></script> <script src="../node_modules/flickity/js/prev-next-button.js"></script> <script src="../node_modules/flickity/js/page-dots.js"></script> <script src="../node_modules/flickity/js/player.js"></script> <script src="../node_modules/flickity/js/add-remove-cell.js"></script> <script src="../as-nav-for.js"></script> </body> </html>