├── .eslintrc.js ├── .gitignore ├── .jshintignore ├── .jshintrc ├── .nvmrc ├── .tm_properties ├── README.md ├── assets ├── _redirects ├── favicon.ico └── img │ └── flickity-illustration.png ├── bower.json ├── content ├── 404.hbs ├── api.hbs ├── events.hbs ├── extras.hbs ├── index.hbs ├── license.hbs ├── options.hbs └── style.hbs ├── css ├── base.css ├── syntax-highlight.css └── web-fonts.css ├── data ├── fullscreen_images.json ├── in_use.json └── licenses.json ├── gulpfile.js ├── js ├── .eslintrc.js ├── boilerplate.js └── init.js ├── modules ├── .eslintrc.js ├── big-links │ ├── big-link.css │ └── big-links.hbs ├── call-out │ ├── call-out.css │ └── fullscreen-call-out.hbs ├── carousel │ └── carousel.css ├── demos │ ├── append │ │ ├── append.hbs │ │ └── append.js │ ├── arrow-wiz │ │ ├── arrow-wiz.css │ │ ├── arrow-wiz.hbs │ │ └── arrow-wiz.js │ ├── as-nav-for │ │ ├── as-nav-for.css │ │ └── as-nav-for.hbs │ ├── auto-play │ │ └── auto-play.hbs │ ├── cell-align │ │ └── cell-align.hbs │ ├── cell-selector │ │ ├── cell-selector.css │ │ └── cell-selector.hbs │ ├── contain │ │ └── contain.hbs │ ├── custom-nav │ │ ├── custom-nav.hbs │ │ └── custom-nav.js │ ├── destroy │ │ ├── destroy.hbs │ │ └── destroy.js │ ├── events-table │ │ ├── events-table.css │ │ ├── events-table.hbs │ │ └── events-table.js │ ├── free-scroll │ │ └── free-scroll.hbs │ ├── fullscreen │ │ ├── fullscreen.css │ │ ├── view-fullscreen-demo.hbs │ │ └── view-fullscreen-demo.js │ ├── imagesloaded │ │ └── imagesloaded.hbs │ ├── insert │ │ └── insert.js │ ├── keyhole │ │ ├── keyhole-content.hbs │ │ ├── keyhole.css │ │ ├── keyhole.hbs │ │ └── keyhole.js │ ├── lazy-load │ │ ├── lazy-cell-images.hbs │ │ ├── lazy-load.css │ │ └── lazy-srcset-images.hbs │ ├── line-dots │ │ ├── line-dots.css │ │ └── line-dots.hbs │ ├── next │ │ ├── next.hbs │ │ └── next.js │ ├── o-dots │ │ ├── o-dots.css │ │ └── o-dots.hbs │ ├── parallax │ │ ├── parallax.css │ │ ├── parallax.hbs │ │ └── parallax.js │ ├── player │ │ ├── player.hbs │ │ └── player.js │ ├── prepend │ │ ├── prepend.hbs │ │ └── prepend.js │ ├── prev-next-big-arrow │ │ ├── prev-next-big-arrow.css │ │ └── prev-next-big-arrow.hbs │ ├── prev-next-small-outside │ │ ├── prev-next-small-outside.css │ │ └── prev-next-small-outside.hbs │ ├── previous │ │ ├── previous.hbs │ │ └── previous.js │ ├── progress-bar │ │ ├── progress-bar.css │ │ ├── progress-bar.hbs │ │ └── progress-bar.js │ ├── remove │ │ ├── remove.hbs │ │ └── remove.js │ ├── reposition │ │ ├── reposition.css │ │ ├── reposition.hbs │ │ └── reposition.js │ ├── resize-show │ │ ├── resize-show.hbs │ │ └── resize-show.js │ ├── resize │ │ ├── resize.css │ │ ├── resize.hbs │ │ └── resize.js │ ├── select-cell-selector │ │ ├── select-cell-selector.hbs │ │ └── select-cell-selector.js │ ├── select-cell │ │ ├── select-cell.hbs │ │ └── select-cell.js │ ├── select-instant │ │ ├── select-instant.hbs │ │ └── select-instant.js │ ├── select │ │ ├── select.hbs │ │ └── select.js │ ├── static-click │ │ ├── static-click.css │ │ ├── static-click.hbs │ │ └── static-click.js │ ├── watch-css │ │ ├── watch-css.css │ │ └── watch-css.hbs │ └── wrap-around │ │ └── wrap-around.hbs ├── example │ └── example.css ├── fizzy-docs-modules-overwrites │ ├── button.css │ ├── buy-button.css │ ├── chunky-button.css │ └── site-footer.css ├── hero-carousel │ ├── hero-carousel.css │ ├── hero-carousel.hbs │ └── hero-carousel.js ├── in-use-carousel │ ├── in-use-carousel.css │ └── in-use-carousel.hbs ├── page-nav │ ├── page-nav.css │ ├── page-nav.js │ └── stickeroo.js └── site-nav │ ├── site-nav.css │ └── site-nav.hbs ├── package-lock.json ├── package.json ├── tasks ├── assets.js ├── content.js ├── css.js ├── dist.js ├── js.js └── utils │ ├── get-glob-paths.js │ ├── highlight-code-block.js │ └── page-nav.js └── templates └── page.hbs /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 'metafizzy' ], 3 | extends: 'plugin:metafizzy/node', 4 | env: { 5 | node: true, 6 | }, 7 | parserOptions: { 8 | ecmaVersion: 2018, 9 | }, 10 | globals: { 11 | }, 12 | rules: { 13 | 'prefer-object-spread': 'error', 14 | }, 15 | ignorePatterns: [ 16 | 'bower_components', 17 | ], 18 | }; 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | bower_components/ 3 | build/ 4 | lib/ 5 | fonts/ 6 | *.mp4 7 | *.gif 8 | assets/img/in-use/ 9 | .netlify 10 | .vercel 11 | -------------------------------------------------------------------------------- /.jshintignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | build 4 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "undef": true, 4 | "unused": true 5 | } 6 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 16 -------------------------------------------------------------------------------- /.tm_properties: -------------------------------------------------------------------------------- 1 | softTabs = true 2 | tabSize = 2 3 | excludeInFileChooser = "{$exclude,build,components,bower_components,node_modules}" 4 | excludeInFolderSearch = "{$exclude,build,components,bower_components,node_modules}" 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Flickity docs 2 | 3 | Documentation for Flickity, the web UI library for touch, responsive, flickable carousels. 4 | 5 | [flickity.metafizzy.co](https://flickity.metafizzy.co) or [flickityjs.com](https://flickityjs.com) 6 | 7 | ## Build 8 | 9 | Building these docs requires [npm](https://npmjs.com), [Bower](http://bower.io), and [Gulp](http://gulpjs.com/). 10 | 11 | ``` bash 12 | npm install 13 | bower install 14 | npx gulp 15 | ``` 16 | 17 | This will build the docs in `build/`. 18 | 19 | Watch for updates to rebuild docs on the fly. 20 | 21 | ``` bash 22 | gulp dev 23 | ``` 24 | 25 | --- 26 | 27 | By [Metafizzy](http://metafizzy.co) 28 | -------------------------------------------------------------------------------- /assets/_redirects: -------------------------------------------------------------------------------- 1 | /v1/* https://flickity-v1.metafizzy.co/:splat 2 | -------------------------------------------------------------------------------- /assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/metafizzy/flickity-docs/73c0a4565c31c3e1a77e29a6dc71fe4ecc65c7c1/assets/favicon.ico -------------------------------------------------------------------------------- /assets/img/flickity-illustration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/metafizzy/flickity-docs/73c0a4565c31c3e1a77e29a6dc71fe4ecc65c7c1/assets/img/flickity-illustration.png -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flickity-docs", 3 | "version": "2.1.0", 4 | "description": "Documentation for Flickity", 5 | "main": "content/index.html", 6 | "license": "BY-CC", 7 | "private": true, 8 | "ignore": [ 9 | "**/.*", 10 | "node_modules", 11 | "bower_components", 12 | "test", 13 | "tests" 14 | ], 15 | "dependencies": { 16 | "flickity": "^2.2.0", 17 | "flickity-imagesloaded": "^2.0.0", 18 | "flickity-as-nav-for": "^2.0.0", 19 | "flickity-bg-lazyload": "^1.0.0", 20 | "flickity-hash": "^1.0.0", 21 | "flickity-fullscreen": "^1.0.0", 22 | "flickity-fade": "^1.0.0", 23 | "normalize.css": "^8.0.0", 24 | "fizzy-ui-utils": "^2.0.0", 25 | "draggabilly": "^2.1.1", 26 | "fizzy-docs-modules": "metafizzy/fizzy-docs-modules" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /content/404.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | title: Page not found 3 | is_404: true 4 | --- 5 | 6 |

Sorry about that!

7 | 8 |

Is a page or file supposed to be here? 9 | Report missing stuff.

10 | 11 |

Keanu

12 | -------------------------------------------------------------------------------- /content/api.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | title: API 3 | --- 4 | 5 |

Methods

6 | 7 |

Methods are actions done by Flickity instances.

8 | 9 |

With jQuery, methods follow the jQuery UI pattern 10 | $carousel.flickity( 'methodName' /*, arguments */ ).

11 | 12 | ``` js 13 | var $carousel = $('.carousel').flickity() 14 | .flickity('next') 15 | .flickity( 'select', 4 ); 16 | ``` 17 | 18 |
19 |

jQuery chaining is broken by methods that return values like getCellElements.

20 |
21 | 22 |

Vanilla JavaScript methods look like 23 | flickity.methodName( /* arguments */ ). Unlike jQuery methods, they cannot be chained together.

24 | 25 | ``` js 26 | // vanilla JS 27 | var flkty = new Flickity('.carousel'); 28 | flkty.next(); 29 | flkty.select( 3 ); 30 | ``` 31 | 32 |

Selecting slides

33 | 34 |

select

35 | 36 |

Select a slide.

37 | 38 | ``` js 39 | // jQuery 40 | $carousel.flickity( 'select', index, isWrapped, isInstant ) 41 | ``` 42 | ``` js 43 | // vanilla JS 44 | flkty.select( index, isWrapped, isInstant ) 45 | ``` 46 | 47 |

48 | index 49 | Integer 50 | Zero-based index of the slide to select. 51 |

52 |

53 | isWrapped 54 | Boolean 55 | Optional. If true, the last slide will be selected if at the first slide. 56 |

57 |

58 | isInstant 59 | Boolean 60 | If true, immediately view the selected slide without animation. 61 |

62 | 63 |
64 |
65 | ``` js 66 | $('.button-group').on( 'click', '.button', function() { 67 | var index = $(this).index(); 68 | $carousel.flickity( 'select', index ); 69 | }); 70 | ``` 71 |
72 | {{> select }} 73 |
74 | 75 |
76 |
77 | ``` js 78 | // select cell instantly, without animation 79 | $('.button-group').on( 'click', '.button', function() { 80 | var index = $(this).index(); 81 | $carousel.flickity( 'select', index, false, true ); 82 | }); 83 | ``` 84 |
85 | {{> select-instant }} 86 |
87 | 88 | {{! ----------------------------------------------------------------- }} 89 | 90 |

previous

91 | 92 |

Select the previous slide.

93 | 94 | ``` js 95 | // jQuery 96 | $carousel.flickity( 'previous', isWrapped, isInstant ) 97 | ``` 98 | ``` js 99 | // vanilla JS 100 | flkty.previous( isWrapped, isInstant ) 101 | ``` 102 | 103 |

104 | isWrapped 105 | Boolean 106 | Optional. If true, the last slide will be selected if at the first slide. 107 |

108 |

109 | isInstant 110 | Boolean 111 | If true, immediately view the selected slide without animation. 112 |

113 | 114 |
115 |
116 | ``` js 117 | // previous 118 | $('.button--previous').on( 'click', function() { 119 | $carousel.flickity('previous'); 120 | }); 121 | // previous wrapped 122 | $('.button--previous-wrapped').on( 'click', function() { 123 | $carousel.flickity( 'previous', true ); 124 | }); 125 | ``` 126 |
127 | {{> previous }} 128 |
129 | 130 | {{! ----------------------------------------------------------------- }} 131 | 132 |

next

133 | 134 |

Select the next slide.

135 | 136 | ``` js 137 | // jQuery 138 | $carousel.flickity( 'next', isWrapped, isInstant ) 139 | ``` 140 | ``` js 141 | // vanilla JS 142 | flkty.next( isWrapped, isInstant ) 143 | ``` 144 | 145 |

146 | isWrapped 147 | Boolean 148 | Optional. If true, the first slide will be selected if at the last slide. 149 |

150 |

151 | isInstant 152 | Boolean 153 | If true, immediately view the selected slide without animation. 154 |

155 | 156 |
157 |
158 | ``` js 159 | // next 160 | $('.button--next').on( 'click', function() { 161 | $carousel.flickity('next'); 162 | }); 163 | // next wrapped 164 | $('.button--next-wrapped').on( 'click', function() { 165 | $carousel.flickity( 'next', true ); 166 | }); 167 | ``` 168 |
169 | {{> next }} 170 |
171 | 172 | {{! ----------------------------------------------------------------- }} 173 | 174 |

selectCell

175 | 176 |

Select a slide of a cell. Useful for groupCells.

177 | 178 | ``` js 179 | // jQuery 180 | $carousel.flickity( 'selectCell', value, isWrapped, isInstant ) 181 | ``` 182 | ``` js 183 | // vanilla JS 184 | flkty.selectCell( value, isWrapped, isInstant ) 185 | ``` 186 | 187 |

188 | value 189 | Integer or selector String 190 | Zero-based index OR selector string of the cell to select. 191 |

192 |

193 | isWrapped 194 | Boolean 195 | Optional. If true, the last slide will be selected if at the first slide. 196 |

197 |

198 | isInstant 199 | Boolean 200 | If true, immediately view the selected slide without animation. 201 |

202 | 203 |
204 |
205 | ``` js 206 | $('.button-group').on( 'click', '.button', function() { 207 | var index = $(this).index(); 208 | $carousel.flickity( 'selectCell', index ); 209 | }); 210 | ``` 211 |
212 | {{> select-cell }} 213 |
214 | 215 |

You can select a cell with a selector string.

216 | 217 |
218 |
219 | ``` html 220 |
221 |
222 |
223 |
224 | ... 225 |
226 | ``` 227 | 228 | ``` js 229 | $carousel.flickity( 'selectCell', '.cell2' ); 230 | ``` 231 |
232 | {{> select-cell-selector }} 233 |
234 | 235 | {{! ----------------------------------------------------------------- }} 236 | 237 |

Sizing and positioning

238 | 239 | {{! ----------------------------------------------------------------- }} 240 | 241 |

resize

242 | 243 |

Resize the carousel and re-position cells.

244 | 245 | ``` js 246 | // jQuery 247 | $carousel.flickity('resize') 248 | ``` 249 | ``` js 250 | // vanilla JS 251 | flkty.resize() 252 | ``` 253 | 254 |
255 |
256 |
257 |
258 | ``` js 259 | $('.button--resize').on( 'click', function() { 260 | // expand carousel by toggling class 261 | $carousel.toggleClass('is-expanded') 262 | .flickity('resize'); 263 | }); 264 | ``` 265 |
266 |
267 | ``` css 268 | .carousel { width: 50%; } 269 | .carousel.is-expanded { width: 100%; } 270 | 271 | .carousel.is-expanded .carousel-cell { 272 | height: 320px; 273 | } 274 | ``` 275 |
276 |
277 | 278 |
279 | {{> resize }} 280 |
281 | 282 |

If Flickity is initialized when hidden, like within a tab, trigger resize after it is shown so cells are properly measured and positioned.

283 | 284 |
285 |
286 | ``` js 287 | $('.button').on( 'click', function() { 288 | $carousel.show() 289 | // resize after un-hiding Flickity 290 | .flickity('resize'); 291 | }); 292 | ``` 293 |
294 | {{> resize-show }} 295 |
296 | 297 | {{! ----------------------------------------------------------------- }} 298 | 299 |

reposition

300 | 301 |

Position cells at selected position. Trigger reposition after the size of a cell has been changed.

302 | 303 | ``` js 304 | // jQuery 305 | $carousel.flickity('reposition') 306 | ``` 307 | ``` js 308 | // vanilla JS 309 | flkty.reposition() 310 | ``` 311 | 312 |
313 |
314 | ``` js 315 | $carousel.on( 'staticClick', function( event, pointer, cellElement, cellIndex ) { 316 | if ( !cellElement ) { 317 | return; 318 | } 319 | $( cellElement ).toggleClass('is-expanded'); 320 | $carousel.flickity('reposition'); 321 | }); 322 | ``` 323 |
324 | {{> reposition }} 325 |
326 | 327 | 328 | {{! ----------------------------------------------------------------- }} 329 | 330 |

Adding and removing cells

331 | 332 |

prepend

333 | 334 |

Prepend elements and create cells to the beginning of the carousel.

335 | 336 | ``` js 337 | // jQuery 338 | $carousel.flickity( 'prepend', elements ) 339 | ``` 340 | ``` js 341 | // vanilla JS 342 | flkty.prepend( elements ) 343 | ``` 344 | 345 |

346 | elements 347 | jQuery object, Array of Elements, Element, or NodeList 348 |

349 | 350 |
351 |
352 | ``` js 353 | $('.button').on( 'click', function() { 354 | var $cellElems = $('
...
'); 355 | $carousel.flickity( 'prepend', $cellElems ); 356 | }); 357 | ``` 358 |
359 | {{> prepend }} 360 |
361 | 362 | {{! ----------------------------------------------------------------- }} 363 | 364 |

append

365 | 366 |

Append elements and create cells to the end of the carousel.

367 | 368 | ``` js 369 | // jQuery 370 | $carousel.flickity( 'append', elements ) 371 | ``` 372 | ``` js 373 | // vanilla JS 374 | flkty.append( elements ) 375 | ``` 376 | 377 |

378 | elements 379 | jQuery object, Array of Elements, Element, or NodeList 380 |

381 | 382 |
383 |
384 | ``` js 385 | $('.button').on( 'click', function() { 386 | var $cellElems = $('
...
'); 387 | $carousel.flickity( 'append', $cellElems ); 388 | }); 389 | ``` 390 |
391 | {{> append }} 392 |
393 | 394 | {{! ----------------------------------------------------------------- }} 395 | 396 |

insert

397 | 398 |

Insert elements into the carousel and create cells.

399 | 400 | ``` js 401 | // jQuery 402 | $carousel.flickity( 'insert', elements, index ) 403 | ``` 404 | ``` js 405 | // vanilla JS 406 | flkty.insert( elements, index ) 407 | ``` 408 | 409 |

410 | elements 411 | jQuery object, Array of Elements, Element, or NodeList 412 |

413 | 414 |

415 | index 416 | Integer 417 | Zero-based index to insert elements. 418 |

419 | 420 |
421 |
422 | ``` js 423 | $('.button').on( 'click', function() { 424 | var $cellElems = $('
...
'); 425 | $carousel.flickity( 'insert', $cellElems, 1 ); 426 | }); 427 | ``` 428 |
429 |
430 |
431 | 432 |
433 |
434 |
435 | 1 436 |
437 |
438 | 2 439 |
440 |
441 | 3 442 |
443 |
444 | {{> edit-demo default="YPeNYj" vanillaJS="EaQZQv" }} 445 |
446 |
447 | 448 | {{! ----------------------------------------------------------------- }} 449 | 450 |

remove

451 | 452 |

Remove cells from carousel and remove elements from DOM.

453 | 454 | ``` js 455 | // jQuery 456 | $carousel.flickity( 'remove', elements ) 457 | ``` 458 | ``` js 459 | // vanilla JS 460 | flkty.remove( elements ) 461 | ``` 462 | 463 |

464 | elements 465 | jQuery object, Array of Elements, Element, or NodeList 466 |

467 | 468 |
469 |
470 | ``` js 471 | $('.carousel').on( 'staticClick', function( event, pointer, cellElement, cellIndex ) { 472 | if ( cellElement ) { 473 | $carousel.flickity( 'remove', cellElement ); 474 | } 475 | }); 476 | ``` 477 |
478 | {{> remove }} 479 |
480 | 481 | {{! ----------------------------------------------------------------- }} 482 | 483 |

Player

484 | 485 |

Control autoPlay behavior.

486 | 487 | {{> player }} 488 | 489 | {{! ----------------------------------------------------------------- }} 490 | 491 |

playPlayer

492 | 493 |

Starts auto-play.

494 | 495 |

Setting autoPlay will automatically start auto-play on initialization. You do not need to start auto-play with playPlayer.

496 | 497 | ``` js 498 | // jQuery 499 | $carousel.flickity('playPlayer') 500 | ``` 501 | ``` js 502 | // vanilla JS 503 | flkty.playPlayer() 504 | ``` 505 | 506 | {{! ----------------------------------------------------------------- }} 507 | 508 |

stopPlayer

509 | 510 |

Stops auto-play and cancels pause.

511 | 512 | ``` js 513 | // jQuery 514 | $carousel.flickity('stopPlayer') 515 | ``` 516 | ``` js 517 | // vanilla JS 518 | flkty.stopPlayer() 519 | ``` 520 | 521 | {{! ----------------------------------------------------------------- }} 522 | 523 |

pausePlayer

524 | 525 |

Pauses auto-play.

526 | 527 | ``` js 528 | // jQuery 529 | $carousel.flickity('pausePlayer') 530 | ``` 531 | ``` js 532 | // vanilla JS 533 | flkty.pausePlayer() 534 | ``` 535 | 536 | {{! ----------------------------------------------------------------- }} 537 | 538 |

unpausePlayer

539 | 540 |

Resumes auto-play if paused.

541 | 542 | ``` js 543 | // jQuery 544 | $carousel.flickity('unpausePlayer') 545 | ``` 546 | ``` js 547 | // vanilla JS 548 | flkty.unpausePlayer() 549 | ``` 550 | 551 | {{! ----------------------------------------------------------------- }} 552 | 553 |

Fullscreen

554 | 555 | {{> fullscreen-call-out }} 556 | 557 | {{! ----------------------------------------------------------------- }} 558 | 559 |

viewFullscreen

560 | 561 |

Expand carousel to fullscreen.

562 | 563 | ``` js 564 | // jQuery 565 | $carousel.flickity('viewFullscreen') 566 | ``` 567 | ``` js 568 | // vanilla JS 569 | flkty.viewFullscreen(); 570 | ``` 571 | 572 |
573 |
574 | ``` js 575 | $('.button').on( 'click', function() { 576 | $carousel.flickity('viewFullscreen'); 577 | }); 578 | ``` 579 |
580 | {{> view-fullscreen-demo }} 581 |
582 | 583 | 584 | {{! ----------------------------------------------------------------- }} 585 | 586 |

exitFullscreen

587 | 588 |

Collapse carousel from fullscreen back to normal size & position.

589 | 590 | ``` js 591 | // jQuery 592 | $carousel.flickity('exitFullscreen') 593 | ``` 594 | ``` js 595 | // vanilla JS 596 | flkty.exitFullscreen(); 597 | ``` 598 | 599 | {{! ----------------------------------------------------------------- }} 600 | 601 |

toggleFullscreen

602 | 603 |

Expand or collapse carousel fullscreen view.

604 | 605 | ``` js 606 | // jQuery 607 | $carousel.flickity('toggleFullscreen') 608 | ``` 609 | ``` js 610 | // vanilla JS 611 | flkty.toggleFullscreen(); 612 | ``` 613 | 614 | {{! ----------------------------------------------------------------- }} 615 | 616 |

Utilities

617 | 618 | {{! ----------------------------------------------------------------- }} 619 | 620 |

destroy

621 | 622 |

Remove Flickity functionality completely. destroy will return the element back to its pre-initialized state.

623 | 624 | ``` js 625 | // jQuery 626 | $carousel.flickity('destroy') 627 | ``` 628 | ``` js 629 | // vanilla JS 630 | flkty.destroy() 631 | ``` 632 | 633 |
634 |
635 | ``` js 636 | var $carousel = $('.carousel').flickity(); 637 | var isFlickity = true; 638 | // toggle Flickity on/off 639 | $('.button--toggle').on( 'click', function() { 640 | if ( isFlickity ) { 641 | // destroy Flickity 642 | $carousel.flickity('destroy'); 643 | } else { 644 | // init new Flickity 645 | $carousel.flickity(); 646 | } 647 | isFlickity = !isFlickity; 648 | }); 649 | ``` 650 |
651 | {{> destroy }} 652 |
653 | 654 | 655 | {{! ----------------------------------------------------------------- }} 656 | 657 |

reloadCells

658 | 659 |

Re-collect all cell elements in flickity-slider.

660 | 661 | ``` js 662 | // jQuery 663 | $carousel.flickity('reloadCells') 664 | ``` 665 | ``` js 666 | // vanilla JS 667 | flkty.reloadCells() 668 | ``` 669 | 670 | {{! ----------------------------------------------------------------- }} 671 | 672 |

getCellElements

673 | 674 |

Get the elements of the cells.

675 | 676 | ``` js 677 | // jQuery 678 | var cellElements = $carousel.flickity('getCellElements') 679 | ``` 680 | ``` js 681 | // vanilla JS 682 | var cellElements = flkty.getCellElements() 683 | ``` 684 | 685 |

686 | cellElements 687 | Array of Elements 688 |

689 | 690 | {{! ----------------------------------------------------------------- }} 691 | 692 |

jQuery.fn.data('flickity')

693 | 694 |

Get the Flickity instance from a jQuery object. Flickity instances are useful to access Flickity properties.

695 | 696 | ``` js 697 | var flkty = $('.carousel').data('flickity') 698 | // access Flickity properties 699 | console.log( 'carousel at ' + flkty.selectedIndex ) 700 | ``` 701 | 702 | {{! ----------------------------------------------------------------- }} 703 | 704 |

Flickity.data()

705 | 706 |

Get the Flickity instance via its element. Flickity.data() is useful for getting the Flickity instance in JavaScript, after it has been initalized in HTML.

707 | 708 | ``` js 709 | var flkty = Flickity.data( element ) 710 | ``` 711 | 712 |

713 | element 714 | Element or Selector String 715 |

716 |

717 | flkty 718 | Flickity 719 |

720 | 721 |
722 |
723 | ``` html 724 | 725 |
...
726 | ``` 727 | 728 | ``` js 729 | // jQuery 730 | // pass in the element, $element[0], not the jQuery object 731 | var flkty = Flickity.data( $('.main-carousel')[0] ) 732 | // vanilla JS 733 | var carousel = document.querySelector('.main-carousel') 734 | var flkty = Flickity.data( carousel ) 735 | // using a selector string 736 | var flkty = Flickity.data('.main-carousel') 737 | ``` 738 |
739 |
740 | 741 | {{! ----------------------------------------------------------------- }} 742 | 743 |

Flickity.setJQuery()

744 | 745 |

Set jQuery for internal use in Flickity. Useful for using Flickity with jQuery and Webpack or Browserify.

746 | 747 | ``` js 748 | Flickity.setJQuery( $ ) 749 | ``` 750 | 751 |

752 | $ 753 | jQuery 754 |

755 | 756 | ``` js 757 | var $ = require('jquery'); 758 | var jQueryBridget = require('jquery-bridget'); 759 | var Flickity = require('flickity'); 760 | 761 | // make Flickity a jQuery plugin 762 | Flickity.setJQuery( $ ); 763 | jQueryBridget( 'flickity', Flickity, $ ); 764 | // now you can use $().flickity() 765 | var $carousel = $('.carousel').flickity({...}); 766 | ``` 767 | 768 | {{! ----------------------------------------------------------------- }} 769 | 770 |

Properties

771 | 772 |
773 |

Properties are accessed only on Flickity instances. If you initialized Flickity with jQuery, use .data('flickity') to get the instance.

774 | 775 | ``` js 776 | // init Flickity with jQuery 777 | var $carousel = $('.carousel').flickity(); 778 | // get instance 779 | var flkty = $carousel.data('flickity'); 780 | // access properties 781 | console.log( flkty.selectedIndex, flkty.selectedElement ); 782 | ``` 783 |
784 | 785 |

selectedIndex

786 | 787 |

Zero-based index of the selected slide.

788 | 789 | ``` js 790 | flkty.selectedIndex 791 | ``` 792 | 793 | {{! ----------------------------------------------------------------- }} 794 | 795 |

selectedElement

796 | 797 |

The selected cell element. For groupCells, the first cell element in the selected slide.

798 | 799 | ``` js 800 | flkty.selectedElement 801 | ``` 802 | 803 | {{! ----------------------------------------------------------------- }} 804 | 805 |

selectedElements

806 | 807 |

An array of elements in the selected slide. Useful for groupCells.

808 | 809 | ``` js 810 | flkty.selectedElements 811 | // -> array of elements 812 | ``` 813 | 814 | {{! ----------------------------------------------------------------- }} 815 | 816 |

cells

817 | 818 |

The array of cells. Use cells.length for the total number of cells.

819 | 820 | ``` js 821 | flkty.cells 822 | // -> array of cells 823 | flkty.cells.length 824 | // -> total number of cells 825 | ``` 826 | 827 | {{! ----------------------------------------------------------------- }} 828 | 829 |

slides

830 | 831 |

The array of slides. Useful for groupCells. A slide contains multiple cells. If groupCells is disabled, then each slide is a cell, so they are one in the same.

832 | 833 | ``` js 834 | flkty.slides 835 | // -> array of slides 836 | flkty.slides.length 837 | // -> total number of slides 838 | ``` 839 | -------------------------------------------------------------------------------- /content/events.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | title: Events 3 | --- 4 | 5 | {{! ----------------------------------------------------------------- }} 6 | 7 |

Event binding

8 | 9 | {{! ----------------------------------------------------------------- }} 10 | 11 |

jQuery event binding

12 | 13 |

Bind events with jQuery with standard jQuery event methods .on(), .off(), and .one(). Event names are namespaced with .flickity.

14 | 15 | ``` js 16 | // jQuery 17 | function listener(/* parameters */) { 18 | console.log('eventName happened'); 19 | } 20 | // bind event listener 21 | $carousel.on( 'eventName.flickity', listener ); 22 | // unbind event listener 23 | $carousel.off( 'eventName.flickity', listener ); 24 | // bind event listener to trigger once. note ONE not ON 25 | $carousel.one( 'eventName.flickity', function() { 26 | console.log('eventName happened just once'); 27 | }); 28 | ``` 29 | 30 | {{! ----------------------------------------------------------------- }} 31 | 32 |

Vanilla JS event binding

33 | 34 |

Bind events with vanilla JS with .on(), .off(), and .once() methods.

35 | 36 | ``` js 37 | // vanilla JS 38 | function listener(/* parameters */) { 39 | console.log('eventName happened'); 40 | } 41 | // bind event listener 42 | flkty.on( 'eventName', listener ); 43 | // unbind event listener 44 | flkty.off( 'eventName', listener ); 45 | // bind event listener to trigger once. note ONCE not ONE or ON 46 | flkty.once( 'eventName', function() { 47 | console.log('eventName happened just once'); 48 | }); 49 | ``` 50 | 51 | {{! ----------------------------------------------------------------- }} 52 | 53 |

on option

54 | 55 |

Bind events within Flickity's options by setting on to an Object. The object's keys should match the event names. on is useful for capturing events as Flickity is initialized, like ready

56 | 57 |
58 |
59 | ``` js 60 | // jQuery 61 | var $carousel = $('.carousel').flickity({ 62 | on: { 63 | ready: function() { 64 | console.log('Flickity is ready'); 65 | }, 66 | change: function( index ) { 67 | console.log( 'Slide changed to' + index ); 68 | } 69 | } 70 | }); 71 | ``` 72 |

When using on with jQuery, event listener functions will use their vanilla JS form, and not include the jQuery event argument.

73 |
74 |
75 | ``` js 76 | // vanilla JS 77 | var flkty = new Flickity( '.carousel', { 78 | on: { 79 | ready: function() { 80 | console.log('Flickity is ready'); 81 | }, 82 | change: function( index ) { 83 | console.log( 'Slide changed to' + index ); 84 | } 85 | } 86 | }); 87 | ``` 88 |
89 |
90 | 91 | 92 | 93 | {{! ----------------------------------------------------------------- }} 94 | 95 |

Events demo

96 | 97 |

Play around with this carousel to see how events are triggered.

98 | 99 | {{> events-table }} 100 | 101 | {{! ----------------------------------------------------------------- }} 102 | 103 |

Flickity events

104 | 105 | {{! ----------------------------------------------------------------- }} 106 | 107 |

ready

108 | 109 |

Triggered after Flickity has been activated.

110 | 111 |

With jQuery, bind event listener first, then initialize Flickity.

112 | 113 | ``` js 114 | // jQuery 115 | var $carousel = $('.carousel'); 116 | // bind event listener first 117 | $carousel.on( 'ready.flickity', function() { 118 | console.log('Flickity ready'); 119 | }); 120 | // initialize Flickity 121 | $carousel.flickity(); 122 | ``` 123 | {{> edit-demo default="NYROXK" }} 124 | 125 |

With vanilla JS, bind listener with the on option, as the ready event may be triggered immediately.

126 | 127 | ``` js 128 | // vanilla JS 129 | var flkty = new Flickity( '.carousel', { 130 | on: { 131 | ready: function() { 132 | console.log('Flickity ready'); 133 | } 134 | } 135 | }); 136 | ``` 137 | {{> edit-demo default="qoaJVp" }} 138 | 139 | {{! ----------------------------------------------------------------- }} 140 | 141 |

change

142 | 143 |

Triggered when the selected slide is changed.

144 | 145 | ``` js 146 | // jQuery 147 | $carousel.on( 'change.flickity', function( event, index ) { 148 | console.log( 'Slide changed to ' + index ) 149 | }); 150 | ``` 151 | ```js 152 | // vanilla JS 153 | flkty.on( 'change', function( index ) {...}); 154 | ``` 155 | 156 |

157 | index 158 | Number 159 | Zero-based number of the selected slide. 160 |

161 | 162 | {{> edit-demo default="bvwxyO" vanillaJS="ZxpMdY" }} 163 | 164 | {{! ----------------------------------------------------------------- }} 165 | 166 |

select

167 | 168 |

Triggered when a slide is selected.

169 | 170 |

select is triggered any time a slide is selected, even on the same slide. change is triggered only when a different slide is selected.

171 | 172 |

This event was previously cellSelect in Flickity v1. cellSelect will continue to work in Flickity v2.

173 | 174 | ``` js 175 | // jQuery 176 | $carousel.on( 'select.flickity', function( event, index ) { 177 | console.log( 'Flickity select ' + index ) 178 | }); 179 | ``` 180 | ```js 181 | // vanilla JS 182 | flkty.on( 'select', function( index ) {...}); 183 | ``` 184 | 185 |

186 | index 187 | Number 188 | Zero-based number of the selected slide. 189 |

190 | 191 | {{> edit-demo default="emVgqE" vanillaJS="ogEwXe" }} 192 | 193 | {{! ----------------------------------------------------------------- }} 194 | 195 |

settle

196 | 197 |

Triggered when the slider is settled at its end position.

198 | 199 | ``` js 200 | // jQuery 201 | $carousel.on( 'settle.flickity', function( event, index ) { 202 | console.log( 'Flickity settled at ' + index ); 203 | }); 204 | ``` 205 | ```js 206 | // vanilla JS 207 | flkty.on( 'settle', function( index ) {...}); 208 | ``` 209 | 210 |

211 | index 212 | Number 213 | Zero-based number of the selected slide. 214 |

215 | 216 | {{> edit-demo default="yyvXYL" vanillaJS="myXweK" }} 217 | 218 | {{! ----------------------------------------------------------------- }} 219 | 220 |

scroll

221 | 222 |

Triggered when the slider moves.

223 | 224 | ``` js 225 | // jQuery 226 | $carousel.on( 'scroll.flickity', function( event, progress ) { 227 | console.log( 'Flickity scrolled ' + progress * 100 + '%' ) 228 | }); 229 | ``` 230 | ```js 231 | // vanilla JS 232 | flkty.on( 'scroll', function( progress ) {...}); 233 | ``` 234 | 235 |

236 | progress 237 | Number 238 | How far slider has moved, from 0 at the first slide to 1 at the end 239 |

240 | 241 |
242 |
243 | ``` js 244 | $carousel.on( 'scroll.flickity', function( event, progress ) { 245 | progress = Math.max( 0, Math.min( 1, progress ) ); 246 | $progressBar.width( progress * 100 + '%' ); 247 | }); 248 | ``` 249 |
250 | {{> progress-bar}} 251 |
252 | 253 |

Use scroll to create parallax effects.

254 | 255 |
256 |
257 | ``` js 258 | var flkty = $carousel.data('flickity'); 259 | var $imgs = $('.carousel-cell img'); 260 | 261 | $carousel.on( 'scroll.flickity', function( event, progress ) { 262 | flkty.slides.forEach( function( slide, i ) { 263 | var img = $imgs[i]; 264 | var x = ( slide.target + flkty.x ) * -1/3; 265 | img.style.transform = 'translateX( ' + x + 'px)'; 266 | }); 267 | }); 268 | ``` 269 |
270 | {{> keyhole }} 271 |
272 | 273 |
274 |
275 | ``` js 276 | var cellRatio = 0.6; // outerWidth of cell / width of carousel 277 | var bgRatio = 0.8; // width of background layer / width of carousel 278 | var fgRatio = 1.25; // width of foreground layer / width of carousel 279 | 280 | $carousel.on( 'scroll.flickity', function( event, progress ) { 281 | moveParallaxLayer( $background, bgRatio, progress ); 282 | moveParallaxLayer( $foreground, fgRatio, progress ); 283 | }); 284 | // trigger initial scroll 285 | $carousel.flickity('reposition'); 286 | 287 | var flkty = $carousel.data('flickity'); 288 | var count = flkty.slides.length - 1; 289 | 290 | function moveParallaxLayer( $layer, layerRatio, progress ) { 291 | var ratio = cellRatio * layerRatio; 292 | $layer.css({ 293 | left: ( 0.5 - ( 0.5 + progress * count ) * ratio ) * 100 + '%' 294 | }); 295 | } 296 | ``` 297 |
298 |
299 | {{> parallax }} 300 |
301 |
302 | 303 | {{! ----------------------------------------------------------------- }} 304 | 305 |

dragStart

306 | 307 |

Triggered when dragging starts and the slider starts moving.

308 | 309 | ``` js 310 | // jQuery 311 | $carousel.on( 'dragStart.flickity', function( event, pointer ) {...}); 312 | ``` 313 | ```js 314 | // vanilla JS 315 | flkty.on( 'dragStart', function( event, pointer ) {...}); 316 | ``` 317 | 318 |

319 | event 320 | Event 321 | Original event object, like mousedown, touchstart, or pointerdown. 322 |

323 |

324 | pointer 325 | Event or Touch 326 | The event object that has .pageX and .pageY. 327 |

328 | 329 | {{> edit-demo default="KwQqWw" vanillaJS="RNQgpB" }} 330 | 331 | {{! ----------------------------------------------------------------- }} 332 | 333 |

dragMove

334 | 335 |

Triggered when dragging moves and the slider moves.

336 | 337 | ``` js 338 | // jQuery 339 | $carousel.on( 'dragMove.flickity', function( event, pointer, moveVector ) {...}); 340 | ``` 341 | ```js 342 | // vanilla JS 343 | flkty.on( 'dragMove', function( event, pointer, moveVector ) {...}); 344 | ``` 345 | 346 |

347 | event 348 | Event 349 | Original event object, like mousemove, touchmove, or pointermove. 350 |

351 |

352 | pointer 353 | Event or Touch 354 | The event object that has .pageX and .pageY. 355 |

356 |

357 | moveVector 358 | Object 359 | How far the pointer has moved from its start position { x: 20, y: -30 }. 360 |

361 | 362 | {{> edit-demo default="azqwWW" vanillaJS="YPeQVL" }} 363 | 364 | {{! ----------------------------------------------------------------- }} 365 | 366 |

dragEnd

367 | 368 |

Triggered when dragging ends.

369 | 370 | ``` js 371 | // jQuery 372 | $carousel.on( 'dragEnd.flickity', function( event, pointer ) {...}); 373 | ``` 374 | ```js 375 | // vanilla JS 376 | flkty.on( 'dragEnd', function( event, pointer ) {...}); 377 | ``` 378 | 379 |

380 | event 381 | Event 382 | Original event object, like mouseup, touchend, or pointerup. 383 |

384 |

385 | pointer 386 | Event or Touch 387 | The event object that has .pageX and .pageY. 388 |

389 | 390 | {{> edit-demo default="ByYZRb" vanillaJS="jEZwwO" }} 391 | 392 | {{! ----------------------------------------------------------------- }} 393 | 394 |

pointerDown

395 | 396 |

Triggered when the user's pointer (mouse, touch, pointer) presses down.

397 | 398 | ``` js 399 | // jQuery 400 | $carousel.on( 'pointerDown.flickity', function( event, pointer ) {...}); 401 | ``` 402 | ```js 403 | // vanilla JS 404 | flkty.on( 'pointerDown', function( event, pointer ) {...}); 405 | ``` 406 | 407 |

408 | event 409 | Event 410 | Original event object, like mousedown, touchstart, or pointerdown. 411 |

412 |

413 | pointer 414 | Event or Touch 415 | The event object that has .pageX and .pageY. 416 |

417 | 418 | {{> edit-demo default="zxRzzZ" vanillaJS="ByYZZE" }} 419 | 420 | {{! ----------------------------------------------------------------- }} 421 | 422 |

pointerMove

423 | 424 |

Triggered when the user's pointer moves.

425 | 426 | ``` js 427 | // jQuery 428 | $carousel.on( 'pointerMove.flickity', function( event, pointer, moveVector ) {...}); 429 | ``` 430 | ```js 431 | // vanilla JS 432 | flkty.on( 'pointerMove', function( event, pointer, moveVector ) {...}); 433 | ``` 434 | 435 |

436 | event 437 | Event 438 | Original event object, like mousemove, touchmove, or pointermove. 439 |

440 |

441 | pointer 442 | Event or Touch 443 | The event object that has .pageX and .pageY. 444 |

445 |

446 | moveVector 447 | Object 448 | How far the pointer has moved from its start position { x: 20, y: -30 }. 449 |

450 | 451 | {{> edit-demo default="XJZgap" vanillaJS="JoLZMP" }} 452 | 453 | {{! ----------------------------------------------------------------- }} 454 | 455 |

pointerUp

456 | 457 |

Triggered when the user's pointer unpresses.

458 | 459 | ``` js 460 | // jQuery 461 | $carousel.on( 'pointerUp.flickity', function( event, pointer ) {...}); 462 | ``` 463 | ```js 464 | // vanilla JS 465 | flkty.on( 'pointerUp', function( event, pointer ) {...}); 466 | ``` 467 | 468 |

469 | event 470 | Event 471 | Original event object, like mouseup, touchend, or pointerup. 472 |

473 |

474 | pointer 475 | Event or Touch 476 | The event object that has .pageX and .pageY. 477 |

478 | 479 | {{> edit-demo default="qExjXV" vanillaJS="pvawrj" }} 480 | 481 | {{! ----------------------------------------------------------------- }} 482 | 483 |

staticClick

484 | 485 |

Triggered when the user's pointer is pressed and unpressed and has not moved enough to start dragging.

486 | 487 |

click events are hard to detect with draggable UI, as they are triggered whenever a user drags. Flickity's staticClick event resolves this, as it is triggered when the user has not dragged.

488 | 489 | ``` js 490 | // jQuery 491 | $carousel.on( 'staticClick.flickity', function( event, pointer, cellElement, cellIndex ) {...}); 492 | ``` 493 | ```js 494 | // vanilla JS 495 | flkty.on( 'staticClick', function( event, pointer, cellElement, cellIndex ) {...}); 496 | ``` 497 | 498 |

499 | event 500 | Event 501 | Original event object. 502 |

503 |

504 | pointer 505 | Event or Touch 506 | The event object that has .pageX and .pageY. 507 |

508 |

509 | cellElement 510 | Element 511 | If a cell was clicked, the element. 512 |

513 |

514 | cellIndex 515 | Integer 516 | If a cell was clicked, the cell’s zero-based number. 517 |

518 | 519 |

Use the cellElement and cellIndex parameters to detect what cell was clicked.

520 | 521 |
522 |
523 | ``` js 524 | $carousel.on( 'staticClick.flickity', function( event, pointer, cellElement, cellIndex ) { 525 | // dismiss if cell was not clicked 526 | if ( !cellElement ) { 527 | return; 528 | } 529 | // change cell background with .is-clicked 530 | $carousel.find('.is-clicked').removeClass('is-clicked'); 531 | $( cellElement ).addClass('is-clicked'); 532 | $logger.text( 'Cell ' + ( cellIndex + 1 ) + ' clicked' ); 533 | }); 534 | ``` 535 |
536 | {{> static-click }} 537 |
538 | 539 | {{! ----------------------------------------------------------------- }} 540 | 541 |

lazyLoad

542 | 543 |

Triggered after an image has been loaded with lazyLoad.

544 | 545 | ``` js 546 | // jQuery 547 | $carousel.on( 'lazyLoad.flickity', function( event, cellElement ) {...}); 548 | ``` 549 | ```js 550 | // vanilla JS 551 | flkty.on( 'lazyLoad', function( event, cellElement ) {...}); 552 | ``` 553 | 554 |

555 | event 556 | Event 557 | Original event object. 558 |

559 |

560 | cellElement 561 | Element 562 | The image's cell element. 563 |

564 | 565 |

lazyLoad is triggered on both valid images and broken images. Check event.type to see if the loaded image was loaded with load or error. Use event.target to access the loaded image.

566 | 567 | ``` js 568 | // jQuery 569 | $carousel.on( 'lazyLoad.flickity', function( event, cellElement ) { 570 | var img = event.originalEvent.target; 571 | console.log( event.originalEvent.type, img.src ); 572 | // load or error on src 573 | }); 574 | ``` 575 | ```js 576 | // vanilla JS 577 | flkty.on( 'lazyLoad', function( event, cellElement ) { 578 | var img = event.target; 579 | console.log( event.type, img.src ); 580 | }); 581 | ``` 582 | 583 | {{> edit-demo default="RPqMra" vanillaJS="VLVXjv" }} 584 | 585 | {{! ----------------------------------------------------------------- }} 586 | 587 |

bgLazyLoad

588 | 589 |

Triggered after a background image has been loaded with bgLazyLoad.

590 | 591 | ``` js 592 | // jQuery 593 | $carousel.on( 'bgLazyLoad.flickity', function( event, element ) {...}); 594 | ``` 595 | ```js 596 | // vanilla JS 597 | flkty.on( 'bgLazyLoad', function( event, element ) {...}); 598 | ``` 599 | 600 |

601 | event 602 | Event 603 | Original event object. 604 |

605 |

606 | element 607 | Element 608 | The element of the background image. 609 |

610 | 611 | {{! ----------------------------------------------------------------- }} 612 | 613 |

fullscreenChange

614 | 615 |

Triggered after entering or exiting fullscreen view.

616 | 617 | 618 | ``` js 619 | // jQuery 620 | $carousel.on( 'fullscreenChange.flickity', function( event, isFullscreen ) {...}); 621 | ``` 622 | ```js 623 | // vanilla JS 624 | flkty.on( 'fullscreenChange', function( isFullscreen ) {...}); 625 | ``` 626 | 627 |

628 | isFullscreen 629 | Boolean 630 | true if viewing fullscreen, false if exiting fullscreen 631 |

632 | -------------------------------------------------------------------------------- /content/extras.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | title: Extras 3 | --- 4 | 5 | {{! ----------------------------------------------------------------- }} 6 | 7 |

Extra demos

8 | 9 | 41 | 42 | {{! ----------------------------------------------------------------- }} 43 | 44 |

Custom navigation UI

45 | 46 |

With the Flickity API, you can build custom carousel navigation UI.

47 | 48 |
49 |
50 | ``` js 51 | // init Flickity 52 | var $carousel = $('.carousel').flickity({ 53 | prevNextButtons: false, 54 | pageDots: false 55 | }); 56 | // Flickity instance 57 | var flkty = $carousel.data('flickity'); 58 | // elements 59 | var $cellButtonGroup = $('.button-group--cells'); 60 | var $cellButtons = $cellButtonGroup.find('.button'); 61 | 62 | // update selected cellButtons 63 | $carousel.on( 'select.flickity', function() { 64 | $cellButtons.filter('.is-selected') 65 | .removeClass('is-selected'); 66 | $cellButtons.eq( flkty.selectedIndex ) 67 | .addClass('is-selected'); 68 | }); 69 | 70 | // select cell on button click 71 | $cellButtonGroup.on( 'click', '.button', function() { 72 | var index = $(this).index(); 73 | $carousel.flickity( 'select', index ); 74 | }); 75 | // previous 76 | $('.button--previous').on( 'click', function() { 77 | $carousel.flickity('previous'); 78 | }); 79 | // next 80 | $('.button--next').on( 'click', function() { 81 | $carousel.flickity('next'); 82 | }); 83 | ``` 84 |
85 | {{> custom-nav }} 86 |
87 | 88 | {{! ----------------------------------------------------------------- }} 89 | 90 |

Module loaders

91 | 92 | {{! ----------------------------------------------------------------- }} 93 | 94 |

Webpack

95 | 96 |

Install Flickity with npm.

97 | 98 | ``` bash 99 | npm install flickity 100 | ``` 101 | 102 |

You can then require('flickity').

103 | 104 | ``` js 105 | // main.js 106 | var Flickity = require('flickity'); 107 | 108 | var flkty = new Flickity( '.carousel', { 109 | // options... 110 | }); 111 | ``` 112 | 113 |

Run webpack.

114 | 115 | ``` bash 116 | webpack main.js bundle.js 117 | ``` 118 | 119 |

Install and require add-on features for imagesLoaded, asNavFor, fullscreen, bgLazyLoad, and hash.

120 | 121 | ``` bash 122 | npm install flickity-imagesloaded 123 | npm install flickity-fullscreen 124 | ``` 125 | 126 | ``` js 127 | var Flickity = require('flickity'); 128 | require('flickity-imagesloaded'); 129 | require('flickity-fullscreen'); 130 | 131 | // now use imagesLoaded and fullscreen 132 | var flkty = new Flickity( '.carousel', { 133 | imagesLoaded: true, 134 | fullscreen: true, 135 | }); 136 | ``` 137 | 138 |

To use Flickity as a jQuery plugin with Webpack, you need to call jQuery Bridget and Flickity.setJQuery().

139 | 140 | ``` bash 141 | npm install jquery-bridget 142 | ``` 143 | 144 | ``` js 145 | var $ = require('jquery'); 146 | var jQueryBridget = require('jquery-bridget'); 147 | var Flickity = require('flickity'); 148 | 149 | // make Flickity a jQuery plugin 150 | Flickity.setJQuery( $ ); 151 | jQueryBridget( 'flickity', Flickity, $ ); 152 | // now you can use $().flickity() 153 | var $carousel = $('.carousel').flickity({...}); 154 | ``` 155 | 156 | {{! ----------------------------------------------------------------- }} 157 | 158 |

Browserify

159 | 160 |

Follow Webpack instructions. Then run browserify.

161 | 162 | ``` bash 163 | browserify main.js -o bundle.js 164 | ``` 165 | 166 | {{! ----------------------------------------------------------------- }} 167 | 168 |

RequireJS

169 | 170 |

Flickity supports RequireJS.

171 | 172 |

You can require flickity.pkgd.js.

173 | 174 | ``` js 175 | requirejs( [ 176 | 'path/to/flickity.pkgd.js', 177 | ], function( Flickity ) { 178 | var flkty = new Flickity( '.carousel', {...}); 179 | }); 180 | ``` 181 | 182 |

Install and require add-on features for imagesLoaded, asNavFor, fullscreen, bgLazyLoad, and hash.

183 | 184 | ``` js 185 | requirejs( [ 186 | 'path/to/flickity.pkgd.js', 187 | 'path/to/flickity-imagesloaded/flickity-imagesloaded.js', 188 | 'path/to/flickity-fullscreen/fullscreen.js', 189 | ], function( Flickity ) { 190 | var flkty = new Flickity( '.carousel', { 191 | imagesLoaded: true, 192 | fullscreen: true, 193 | }); 194 | }); 195 | ``` 196 | 197 |

To use Flickity as a jQuery plugin with RequireJS and flickity.pkgd.js, you need to call jQuery Bridget.

198 | 199 | ``` js 200 | // require the require function 201 | requirejs( [ 'require', 'jquery', 'path/to/flickity.pkgd.js' ], 202 | function( require, $, Flickity ) { 203 | // require jquery-bridget, it's included in flickity.pkgd.js 204 | require( [ 'jquery-bridget/jquery-bridget' ], 205 | function( jQueryBridget ) { 206 | // make Flickity a jQuery plugin 207 | jQueryBridget( 'flickity', Flickity, $ ); 208 | // now you can use $().flickity() 209 | var $carousel = $('.carousel').flickity({...}); 210 | } 211 | ); 212 | }); 213 | ``` 214 | 215 |

Or, you can manage dependencies with npm or Bower. Set baseUrl to the packages folder and set a config path for all your application code.

216 | 217 | ``` js 218 | requirejs.config({ 219 | baseUrl: 'node_modules/', 220 | paths: { 221 | app: '../' 222 | } 223 | }); 224 | 225 | requirejs( [ 226 | 'flickity/js/index', 227 | 'app/my-component.js' 228 | ], function( Flickity, myComp ) { 229 | var flkty = new Flickity( '.carousel', {...}); 230 | }); 231 | ``` 232 | 233 |

To use Flickity as a jQuery plugin with RequireJS and a package manager, you need to install and call jQuery Bridget.

234 | 235 | ``` js 236 | requirejs.config({ 237 | baseUrl: 'node_modules/', 238 | paths: { 239 | jquery: 'jquery/jquery' 240 | } 241 | }); 242 | 243 | requirejs( [ 244 | 'jquery', 245 | 'flickity/js/index', 246 | 'jquery-bridget/jquery-bridget' 247 | ], 248 | function( $, Flickity ) { 249 | // make Flickity a jQuery plugin 250 | $.bridget( 'flickity', Flickity, $ ); 251 | // now you can use $().flickity() 252 | var $carousel = $('.carousel').flickity({...}); 253 | }); 254 | ``` 255 | 256 | {{! ----------------------------------------------------------------- }} 257 | 258 |

Browser support

259 | 260 |

Flickity v2.1 supports Chrome 33+, Safari 9+ (mobile & desktop), IE11+, Edge 12+, and Firefox 23+.

261 | 262 |

For IE8+ and Android 2.3+ support, try Flickity v1.

263 | 264 | {{! ----------------------------------------------------------------- }} 265 | 266 |

Upgrading from v1

267 | 268 |

Flickity v2 dropped browser support for IE8, IE9, and Android 2.3. Nearly all options, methods, and code for Flickity v1 is backwards compatibile with Flickity v2.

269 | 270 |

Breaking changes

271 | 272 | 284 | 285 |

Compatible changes

286 | 287 | 292 | 293 |

New features

294 | 295 | 302 | 303 | {{! ----------------------------------------------------------------- }} 304 | 305 |

Issues

306 | 307 |

Reduced test cases

308 | 309 |

Creating a reduced test case is the best way to debug problems and report issues. Read CSS Tricks on why they’re so great.

310 | 311 |

Create a reduced test case for Flickity by forking any one of the CodePen demos from these docs.

312 | 313 | 318 | 319 |

Creating a reduced test case is the best way to get your issue addressed. They help you point out the problem. They help us debug the problem. They help others understand the problem.

320 | 321 | {{! ----------------------------------------------------------------- }} 322 | 323 |

Submitting issues

324 | 325 |

Report issues on GitHub. Make sure to include a reduced test case. Without a reduced test case, your issue may be closed.

326 | 327 | {{! ----------------------------------------------------------------- }} 328 | 329 |

Feature requests

330 | 331 |

Help us select new features by looking over requested features on the GitHub issue tracker and adding your 👍 reaction to features you’d like to see added.

332 | 333 | {{! ----------------------------------------------------------------- }} 334 | -------------------------------------------------------------------------------- /content/index.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | is_homepage: true 3 | --- 4 | 5 | {{! ----------------------------------------------------------------- }} 6 | 7 |

Install

8 | 9 | {{! ----------------------------------------------------------------- }} 10 | 11 |

Download

12 | 13 | 29 | 30 | {{! ----------------------------------------------------------------- }} 31 | 32 |

CDN

33 | 34 |

Link directly to Flickity files on unpkg.

35 | 36 | ``` html 37 | 38 | 39 | ``` 40 | 41 | ``` html 42 | 43 | 44 | ``` 45 | 46 | {{! ----------------------------------------------------------------- }} 47 | 48 |

Package managers

49 | 50 |

Install with npm: npm install flickity

51 | 52 |

Install with Bower: bower install flickity --save

53 | 54 | {{! ----------------------------------------------------------------- }} 55 | 56 |

License

57 | 58 | {{! ----------------------------------------------------------------- }} 59 | 60 |

Commercial license

61 | 62 |

If you want to use Flickity to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Read more about Flickity commercial licensing.

63 | 64 |

Once purchased, you’ll receive a commercial license PDF and be all set to use Flickity in your commercial applications.

65 | 66 |
67 | {{#licenses.developer}} 68 | {{> buy-button}} 69 | {{/licenses.developer}} 70 | 71 | {{#licenses.team}} 72 | {{> buy-button}} 73 | {{/licenses.team}} 74 | 75 | {{#licenses.organization}} 76 | {{> buy-button}} 77 | {{/licenses.organization}} 78 |
79 | 80 | {{! ----------------------------------------------------------------- }} 81 | 82 |

Open source license

83 | 84 |

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Flickity under the terms of the GPLv3. Read more about Flickity open source licensing.

85 | 86 | {{! ----------------------------------------------------------------- }} 87 | 88 |

Getting started

89 | 90 |

Include the Flickity .css and .js files in your site.

91 | 92 | ``` html 93 | 94 | ``` 95 | 96 | ``` html 97 | 98 | ``` 99 | 100 |

Flickity works on a container carousel element with a group of cell elements.

101 | 102 | ``` html 103 |
104 |
...
105 |
...
106 |
...
107 | ... 108 |
109 | ``` 110 | 111 |

There are several ways to initialize Flickity.

112 | 113 | {{! ----------------------------------------------------------------- }} 114 | 115 |

Initialize with jQuery

116 | 117 |

You can use Flickity as a jQuery plugin: $('selector').flickity().

118 | 119 | ``` js 120 | $('.main-carousel').flickity({ 121 | // options 122 | cellAlign: 'left', 123 | contain: true 124 | }); 125 | ``` 126 | 127 | {{! ----------------------------------------------------------------- }} 128 | 129 |

Initialize with vanilla JavaScript

130 | 131 |

You can use Flickity with vanilla JS: new Flickity( elem ). The Flickity() constructor accepts two arguments: the carousel element and an options object.

132 | 133 | ``` js 134 | var elem = document.querySelector('.main-carousel'); 135 | var flkty = new Flickity( elem, { 136 | // options 137 | cellAlign: 'left', 138 | contain: true 139 | }); 140 | 141 | // element argument can be a selector string 142 | // for an individual element 143 | var flkty = new Flickity( '.main-carousel', { 144 | // options 145 | }); 146 | ``` 147 | 148 | {{! ----------------------------------------------------------------- }} 149 | 150 |

Initialize with HTML

151 | 152 |

You can initialize Flickity in HTML, without writing any JavaScript. Add data-flickity attribute to the carousel element. Options can be set in its value.

153 | 154 | 155 | ``` html 156 |
157 | ``` 158 | 159 |
160 |

Options set in HTML must be valid JSON. Keys need to be quoted, for example "cellAlign":. Note that the attribute value uses single quotes ', but the JSON entities use double-quotes ".

161 |
162 | 163 | {{! ----------------------------------------------------------------- }} 164 | 165 |

Next

166 | 167 | 172 | 173 | {{! ----------------------------------------------------------------- }} 174 | 175 |

Feature showcase

176 | 177 | {{! ----------------------------------------------------------------- }} 178 | 179 |
180 |
181 |

wrapAround

182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 | {{> edit-demo default="myXdej" }} 190 |

Wrap-around the end back to the beginning for infinite scrolling.

191 |
192 |
193 |

freeScroll

194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 | {{> edit-demo default="bNLGNZ" }} 202 |

Freely flick and scroll content without alignment.

203 |
204 |
205 | 206 |
207 |
208 |

groupCells

209 |
211 |
212 |
213 |
214 | 215 |
216 |
217 |
218 | 219 |
220 |
221 |
222 | 223 |
224 |
225 |
226 | {{> edit-demo default="XKZXyv" }} 227 |

Groups cells together to act as individual slides.

228 |
229 |
230 |

autoPlay

231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 | {{> edit-demo default="RNQwaB" }} 239 |

Automatically advance to the next cell.

240 |
241 |
242 | 243 |
244 |
245 |

lazyLoad

246 |
248 | {{> lazy-cell-images}} 249 |
250 | {{> edit-demo default="vOeGzL" }} 251 |

Load cell images when selected.

252 |
253 |
254 |

Parallax

255 | {{> keyhole-content }} 256 |

Parallax effects on scroll event.

257 |
258 |
259 | 260 |

Images

261 | 262 |

Flickity makes beautiful image galleries.

263 | 264 |
265 |
266 |
268 | 269 | orange tree 270 | submerged 271 | look-out 272 | freedom tower 273 | drizzle 274 | cat nose 275 | contrail 276 | sunset 277 | formation 278 |
279 | {{> edit-demo default="GgQREP" }} 280 |
281 |
282 | 283 | 284 |

View all options

285 | 286 | {{! ----------------------------------------------------------------- }} 287 | 288 |

Flickity in use

289 | 290 |

We’d love to see how you use Flickity! Tweet @metafizzyco or email yo@metafizzy.co to share your work and possibly get it featured here.

291 | 292 | {{> in-use-carousel }} 293 | 294 | {{! ----------------------------------------------------------------- }} 295 | 296 | {{#unless isExport}} 297 | 298 |

People like Flickity

299 | 300 |

301 | 302 |

303 | 304 | {{/unless}} 305 | -------------------------------------------------------------------------------- /content/license.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | title: License 3 | --- 4 | 5 | {{> license-content}} 6 | -------------------------------------------------------------------------------- /content/style.hbs: -------------------------------------------------------------------------------- 1 | --- 2 | title: Style 3 | --- 4 | 5 |

Cell style

6 | 7 |

Cell sizing

8 | 9 |

All sizing and styling of the cells are handled by your own CSS. The height of the carousel is set to the maximum height of the cells.

10 | 11 |
12 |
13 | ``` css 14 | .carousel-cell { 15 | width: 100%; /* full width */ 16 | height: 160px; /* height of carousel */ 17 | margin-right: 10px; 18 | } 19 | ``` 20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | {{> edit-demo default="dPdyJK" }} 30 |
31 |
32 | 33 |
34 |
35 | ``` css 36 | .carousel-cell { 37 | width: 50%; /* half-width */ 38 | height: 160px; 39 | margin-right: 10px; 40 | } 41 | ``` 42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | {{> edit-demo default="gbvOvy" }} 52 |
53 |
54 | 55 |

Cells can be different sizes. You can use any unit you like: percent, pixels, etc.

56 | 57 |
58 |
59 | ``` css 60 | .carousel-cell { 61 | width: 33%; 62 | height: 160px; 63 | margin-right: 10px; 64 | } 65 | .carousel-cell.size-180 { width: 180px; } 66 | .carousel-cell.size-large { width: 75%; } 67 | ``` 68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 | {{> edit-demo default="raJNdm" }} 78 |
79 |
80 | 81 |

You can use media queries to show different number of cells for different breakpoints.

82 | 83 |
84 |
85 | ``` css 86 | /* default full-width cells */ 87 | .carousel-cell { 88 | width: 100%; 89 | height: 160px; 90 | margin-right: 10px; 91 | } 92 | 93 | @media screen and ( min-width: 768px ) { 94 | /* half-width cells for larger devices */ 95 | .carousel-cell { width: 50%; } 96 | } 97 | ``` 98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 | {{> edit-demo default="azqbGV" }} 108 |
109 |
110 | 111 |

Selected cell

112 | 113 |

Flickity adds is-selected class to the selected cell.

114 | 115 |
116 |
117 | ``` css 118 | .carousel-cell.is-selected { 119 | background: #ED2; 120 | } 121 | ``` 122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 | {{> edit-demo default="YPezvR" }} 134 |
135 |
136 | 137 | {{! ---------------------------------------------- }} 138 | 139 |

Previous & next buttons

140 | 141 |

Style and position previous & next buttons with CSS.

142 | 143 |
144 |
145 | ``` css 146 | /* no circle */ 147 | .flickity-button { 148 | background: transparent; 149 | } 150 | /* big previous & next buttons */ 151 | .flickity-prev-next-button { 152 | width: 100px; 153 | height: 100px; 154 | } 155 | /* icon color */ 156 | .flickity-button-icon { 157 | fill: white; 158 | } 159 | /* hide disabled button */ 160 | .flickity-button:disabled { 161 | display: none; 162 | } 163 | ``` 164 |
165 | {{> prev-next-big-arrow }} 166 |
167 | 168 |
169 |
170 | ``` css 171 | /* smaller, dark, rounded square */ 172 | .flickity-button { 173 | background: #333; 174 | } 175 | .flickity-button:hover { 176 | background: #F90; 177 | } 178 | 179 | .flickity-prev-next-button { 180 | width: 30px; 181 | height: 30px; 182 | border-radius: 5px; 183 | } 184 | /* icon color */ 185 | .flickity-button-icon { 186 | fill: white; 187 | } 188 | /* position outside */ 189 | .flickity-prev-next-button.previous { 190 | left: -40px; 191 | } 192 | .flickity-prev-next-button.next { 193 | right: -40px; 194 | } 195 | ``` 196 |
197 | {{> prev-next-small-outside }} 198 |
199 | 200 |

Previous & next buttons have :focus style. Click on a carousel, then hit TAB to see it.

201 | 202 |
203 |
204 | ``` css 205 | /* already included in flickity.css */ 206 | .flickity-button:focus { 207 | outline: none; 208 | box-shadow: 0 0 0 5px #19F; 209 | } 210 | ``` 211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 | 223 | {{! ---------------------------------------------- }} 224 | 225 |

Page dots

226 | 227 |

Style and position page dots with CSS.

228 | 229 |
230 |
231 | ``` css 232 | /* position dots in carousel */ 233 | .flickity-page-dots { 234 | bottom: 0px; 235 | } 236 | /* white circles */ 237 | .flickity-page-dots .dot { 238 | width: 12px; 239 | height: 12px; 240 | opacity: 1; 241 | background: transparent; 242 | border: 2px solid white; 243 | } 244 | /* fill-in selected dot */ 245 | .flickity-page-dots .dot.is-selected { 246 | background: white; 247 | } 248 | ``` 249 |
250 | {{> o-dots }} 251 |
252 | 253 |
254 |
255 | ``` css 256 | /* position dots up a bit */ 257 | .flickity-page-dots { 258 | bottom: -22px; 259 | } 260 | /* dots are lines */ 261 | .flickity-page-dots .dot { 262 | height: 4px; 263 | width: 40px; 264 | margin: 0; 265 | border-radius: 0; 266 | } 267 | ``` 268 |
269 | {{> line-dots }} 270 |
271 | 272 | {{! ---------------------------------------------- }} 273 | 274 |

Carousel

275 | 276 |

Add a carousel :focus style style to aid accessibility. When focused, users can navigate the carousel with their keyboard.

277 | 278 |
279 |
280 | ``` css 281 | .flickity-enabled:focus .flickity-viewport { 282 | outline: thin dotted; 283 | outline: 5px auto -webkit-focus-ring-color; 284 | } 285 | ``` 286 |
287 |
288 |
289 |
290 |
291 |
292 |
293 |
294 |
295 | {{> edit-demo default="RNQOGm" }} 296 |
297 |
298 | 299 | -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | /* base 2 | ------------------------- */ 3 | 4 | * { 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | font-family: 'Texta', sans-serif; 10 | color: #444; 11 | line-height: 1.5; 12 | margin: 0; 13 | padding: 0; 14 | } 15 | 16 | /* font size on html for rem */ 17 | html { font-size: 17px; } 18 | html.export { font-size: 15px; } 19 | 20 | a { 21 | color: #6A6; 22 | text-decoration: none; 23 | } 24 | 25 | a:hover { 26 | color: #E90; 27 | } 28 | 29 | h1, h2, h3 { 30 | line-height: 1.2; 31 | } 32 | 33 | /* ---- code ---- */ 34 | 35 | pre, code, kbd { 36 | font-family: Consolas, Menlo, monospace; 37 | font-size: 14px; 38 | background: #FAFAFA; 39 | border: 1px solid #DDD; 40 | white-space: pre-wrap; 41 | } 42 | 43 | pre { 44 | padding: 10px; 45 | border-radius: 6px; 46 | overflow: auto; 47 | } 48 | 49 | code, kbd { 50 | padding: 2px 3px; 51 | line-height: 1.2; 52 | border-radius: 3px; 53 | } 54 | 55 | pre code { 56 | padding: 0; 57 | line-height: 1.5; 58 | background: none; 59 | border: none; 60 | } 61 | 62 | /* ---- table ---- */ 63 | 64 | th, td { 65 | padding: 3px 20px 3px 0; 66 | } 67 | 68 | th { 69 | text-align: left; 70 | color: #AAA; 71 | font-weight: normal; 72 | } 73 | 74 | td { 75 | border-top: 1px solid #DDD; 76 | } 77 | 78 | tr:nth-child(2) td { 79 | border-top: 3px double #DDD; 80 | } 81 | 82 | /* ---- main ---- */ 83 | 84 | .main { 85 | position: relative; /* for page-nav */ 86 | } 87 | 88 | /* ---- content ---- */ 89 | 90 | .container { 91 | max-width: 1000px; 92 | padding: 0 10px; 93 | } 94 | 95 | /* ---- page-title ---- */ 96 | 97 | .page-title { 98 | font-size: 2.2rem; 99 | margin: 0.4rem 0; 100 | } 101 | 102 | /* ---- main ---- */ 103 | 104 | .main h2 { 105 | font-size: 1.6rem; 106 | font-weight: normal; 107 | border-top: 4px double #DDD; 108 | padding-top: 1.1rem; 109 | margin-top: 1.4rem; 110 | } 111 | 112 | .main h3 { 113 | font-size: 1.3rem; 114 | border-top: 1px solid #DDD; 115 | padding-top: 0.8rem; 116 | margin: 1.4rem 0 0.5rem; 117 | } 118 | 119 | /* ---- logger ---- */ 120 | 121 | .logger { 122 | padding: 0.25rem; 123 | font-size: 1.2rem; 124 | background: #FAFAFA; 125 | text-align: center; 126 | } 127 | 128 | 129 | /* ---- data-license-property ---- */ 130 | 131 | *[data-license-property] { 132 | color: #09F; 133 | } 134 | 135 | /* ---- hide-small ---- */ 136 | 137 | @media screen and ( max-width: 640px ) { 138 | .hidden-small { 139 | display: none; 140 | } 141 | } 142 | 143 | @media screen and ( min-width: 768px ) { 144 | 145 | html { font-size: 19px; } 146 | html.export { font-size: 16px; } 147 | 148 | .container { 149 | padding: 0 30px; 150 | } 151 | 152 | .page-title { 153 | font-size: 4.0rem; 154 | } 155 | 156 | .main h3 { 157 | font-size: 1.6rem; 158 | padding-top: 30px; 159 | } 160 | 161 | .main h2 { 162 | font-size: 2.4rem; 163 | } 164 | 165 | pre, code, kbd { 166 | font-size: 15px; 167 | } 168 | 169 | } 170 | -------------------------------------------------------------------------------- /css/syntax-highlight.css: -------------------------------------------------------------------------------- 1 | /* syntax highlight 2 | ------------------------- */ 3 | 4 | code .string, 5 | code .tag .value { color: #0A2; } 6 | code .number, /* integer */ 7 | code .literal { color: #07D; } /*boolean*/ 8 | code .keyword { color: #E31; } /* keyword */ 9 | code .attribute { color: #D31; } /* markup attribute */ 10 | code .title { color: #39A; } 11 | code .params { color: #98D; } 12 | 13 | /* comment */ 14 | code .comment { color: #999; font-style: italic; } 15 | 16 | code .tag { color: #37B; } /* Markup open tag */ 17 | 18 | code .id { color: #567; } /* css id */ 19 | code .class { color: #B27; } /* CSS class */ 20 | code .rules { color: #431; } 21 | code .value { color: #555; } /* CSS value */ 22 | code .pseudo { color: #38D; } /* CSS pseudo selector */ 23 | code .hexcolor { color: #F63; } 24 | code .at_rule { color: #088; } 25 | 26 | code .built_in { color: #E08; } 27 | 28 | code .flickity, /* new Flickity() */ 29 | code .flickity_var { color: #D0D; } /* flkty */ 30 | 31 | code .jquery_var { color: #D70; } /* $carousel */ 32 | 33 | code .flickity { text-decoration: underline; } 34 | -------------------------------------------------------------------------------- /css/web-fonts.css: -------------------------------------------------------------------------------- 1 | /* web fonts 2 | ------------------------- */ 3 | 4 | @import url("//hello.myfonts.net/count/2d333f"); 5 | 6 | /* 7 | Just use WOFF2 and WOFF for webfonts 8 | http://css-tricks.com/snippets/css/using-font-face/ */ 9 | 10 | /* Texta Heavy */ 11 | @font-face { 12 | font-family: 'Texta'; 13 | font-weight: bold; 14 | font-style: normal; 15 | src: url('../fonts/2D333F_0_0.woff2') format('woff2'), 16 | url('../fonts/2D333F_0_0.woff') format('woff'); 17 | } 18 | 19 | /* Texta Italic */ 20 | @font-face { 21 | font-family: 'Texta'; 22 | font-weight: normal; 23 | font-style: italic; 24 | src: url('../fonts/2D333F_1_0.woff2') format('woff2'), 25 | url('../fonts/2D333F_1_0.woff') format('woff'); 26 | } 27 | 28 | /* Texta Regular */ 29 | @font-face { 30 | font-family: 'Texta'; 31 | src: url('../fonts/2D333F_2_0.woff2') format('woff2'), 32 | url('../fonts/2D333F_2_0.woff') format('woff'); 33 | } 34 | -------------------------------------------------------------------------------- /data/fullscreen_images.json: -------------------------------------------------------------------------------- 1 | [ 2 | "https://picsum.photos/720/540/?image=517", 3 | "https://picsum.photos/540/720/?image=696", 4 | "https://picsum.photos/720/540/?image=56", 5 | "https://picsum.photos/800/500/?image=1084", 6 | "https://picsum.photos/720/540/?image=1080", 7 | "https://picsum.photos/640/640/?image=1074", 8 | "https://picsum.photos/720/540/?image=1069", 9 | "https://picsum.photos/800/500/?image=1062", 10 | "https://picsum.photos/640/640/?image=935", 11 | "https://picsum.photos/720/540/?image=855", 12 | "https://picsum.photos/640/640/?image=824" 13 | ] 14 | -------------------------------------------------------------------------------- /data/in_use.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Riot Games", 4 | "url": "https://www.riotgames.com/en", 5 | "image": "https://i.imgur.com/lxdGu60.jpg" 6 | }, 7 | { 8 | "title": "The Jane Goodall Institute New Zealand", 9 | "url": "http://www.janegoodall.org.nz/", 10 | "image": "https://i.imgur.com/ndBOIk4.jpg" 11 | }, 12 | { 13 | "title": "Cotton Bureau", 14 | "url": "https://cottonbureau.com/products/fizzy-bear", 15 | "image": "https://i.imgur.com/jGFnPzd.jpg" 16 | }, 17 | { 18 | "title": "SXSW Conference", 19 | "url": "https://www.sxsw.com", 20 | "image": "https://i.imgur.com/l8hfIml.jpg" 21 | }, 22 | { 23 | "title": "Engadget", 24 | "url": "http://www.engadget.com/2016/01/05/canon-new-powershot-vixia-cameras", 25 | "image": "https://i.imgur.com/qkXOEOj.jpg" 26 | }, 27 | { 28 | "title": "unlocked", 29 | "url": "https://unlocked.ch", 30 | "image": "https://i.imgur.com/Y8bQw1t.jpg" 31 | }, 32 | { 33 | "title": "CustomInk", 34 | "url": "https://www.customink.com/products/styles/next-level-tri-blend-t-shirt/186900", 35 | "image": "https://i.imgur.com/qz1Q91n.jpg" 36 | }, 37 | { 38 | "title": "Artsy", 39 | "url": "https://www.artsy.net/show/maison-gerard-maison-gerard-and-the-indianapolis-museum-of-art-celebrate-ayala-serfaty", 40 | "image": "https://i.imgur.com/yKhaKAp.jpg" 41 | }, 42 | { 43 | "title": "Codrops Photography Website Concept", 44 | "url": "http://tympanus.net/Development/PhotographyWebsiteConcept/", 45 | "image": "https://i.imgur.com/KwkBANB.jpg" 46 | }, 47 | { 48 | "title": "District Shopify theme", 49 | "url": "http://district-theme-demo.myshopify.com/", 50 | "image": "https://i.imgur.com/msauCzq.jpg" 51 | }, 52 | { 53 | "title": "Tony Hornecker", 54 | "url": "http://tonyhornecker.com/work/homes-project/the-palafito.php", 55 | "image": "https://i.imgur.com/ZevmGsl.jpg" 56 | }, 57 | { 58 | "title": "Rookie", 59 | "url": "http://www.rookiemag.com/", 60 | "image": "https://i.imgur.com/dkTEqLp.jpg" 61 | } 62 | ] 63 | -------------------------------------------------------------------------------- /data/licenses.json: -------------------------------------------------------------------------------- 1 | { 2 | "developer": { 3 | "title": "Developer", 4 | "for": "1 developer", 5 | "price": "25", 6 | "gumroadSlug": "flickity-dev" 7 | }, 8 | "team": { 9 | "title": "Team", 10 | "for": "up to 8 developers", 11 | "price": "110", 12 | "gumroadSlug": "flickity-team" 13 | }, 14 | "organization": { 15 | "title": "Organization", 16 | "for": "Unlimited developers", 17 | "price": "320", 18 | "gumroadSlug": "flickity-org" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | let gulp = require('gulp'); 2 | 3 | // ----- site ----- // 4 | 5 | // stuff used across tasks 6 | let site = { 7 | // templating data 8 | data: { 9 | productName: 'Flickity', 10 | description: 'Touch, responsive, flickable carousels', 11 | majorVersion: 2, 12 | isDev: process.argv[2] === 'dev', 13 | isExport: process.argv[2] === 'export', 14 | }, 15 | }; 16 | 17 | // ----- tasks ----- // 18 | 19 | require('./tasks/assets')( site ); 20 | require('./tasks/dist')( site ); 21 | require('./tasks/js')( site ); 22 | require('./tasks/css')( site ); 23 | require('./tasks/content')( site ); 24 | 25 | // ----- default ----- // 26 | 27 | gulp.task( 'default', gulp.parallel( 28 | 'content', 29 | 'js', 30 | 'css', 31 | 'dist', 32 | 'prod-assets', 33 | ) ); 34 | 35 | // ----- export ----- // 36 | 37 | // version of site used in flickity-docs.zip 38 | 39 | gulp.task( 'export', gulp.parallel('default') ); 40 | 41 | // ----- watch ----- // 42 | 43 | gulp.task( 'dev', gulp.parallel( 44 | 'dist', 45 | 'prod-assets', 46 | 'content', 47 | ) ); 48 | -------------------------------------------------------------------------------- /js/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 'metafizzy' ], 3 | extends: 'plugin:metafizzy/browser', 4 | env: { 5 | node: true, 6 | }, 7 | parserOptions: { 8 | ecmaVersion: 2018, 9 | }, 10 | globals: { 11 | }, 12 | rules: { 13 | 'prefer-object-spread': 'error', 14 | }, 15 | ignorePatterns: [], 16 | }; 17 | -------------------------------------------------------------------------------- /js/boilerplate.js: -------------------------------------------------------------------------------- 1 | // boilerplate 2 | ( function() { 3 | 4 | // global namespace 5 | let FlickityDocs = window.FlickityDocs = {}; 6 | 7 | // ----- utils ----- // 8 | 9 | window.utils = window.fizzyUIUtils; 10 | 11 | // ----- helpers ----- // 12 | 13 | // for prepend, append, insert demos 14 | FlickityDocs.makeCellElem = function( num ) { 15 | let cellElem = document.createElement('div'); 16 | cellElem.className = 'carousel-cell'; 17 | let number = document.createElement('span'); 18 | number.className = 'carousel-cell__number'; 19 | number.textContent = num; 20 | cellElem.appendChild( number ); 21 | return cellElem; 22 | }; 23 | 24 | window.filterBind = function( elem, type, selector, listener ) { 25 | elem.addEventListener( type, function( event ) { 26 | if ( event.target.matches( selector ) ) listener( event ); 27 | } ); 28 | }; 29 | 30 | } )(); 31 | -------------------------------------------------------------------------------- /js/init.js: -------------------------------------------------------------------------------- 1 | /* globals FlickityDocs, FizzyDocs */ 2 | 3 | ( function() { 4 | 5 | // init all modules, based on their data-js attribute 6 | let jsModuleElems = document.querySelectorAll('[data-js]'); 7 | for ( let i = 0; i < jsModuleElems.length; i++ ) { 8 | let elem = jsModuleElems[i]; 9 | let moduleName = elem.getAttribute('data-js'); 10 | let module = FlickityDocs[ moduleName ] || FizzyDocs[ moduleName ]; 11 | if ( module ) { 12 | module( elem ); 13 | } 14 | } 15 | 16 | } )(); 17 | -------------------------------------------------------------------------------- /modules/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 'metafizzy' ], 3 | extends: 'plugin:metafizzy/browser', 4 | env: { 5 | node: true, 6 | }, 7 | parserOptions: { 8 | ecmaVersion: 2018, 9 | }, 10 | globals: { 11 | Draggabilly: false, 12 | filterBind: false, 13 | Flickity: false, 14 | FlickityDocs: false, 15 | getSize: false, 16 | utils: false, 17 | }, 18 | rules: { 19 | 'prefer-object-spread': 'error', 20 | }, 21 | ignorePatterns: [], 22 | }; 23 | -------------------------------------------------------------------------------- /modules/big-links/big-link.css: -------------------------------------------------------------------------------- 1 | /* big link 2 | big buttons at the top of the homepage 3 | ------------------------- */ 4 | 5 | .big-links__item { 6 | margin-bottom: 10px; 7 | } 8 | 9 | .big-link { 10 | display: block; 11 | font-size: 1.2rem; 12 | padding: 0.7rem 0.7rem; 13 | border-radius: 5px; 14 | line-height: 1; 15 | } 16 | 17 | .big-link:active { 18 | box-shadow: inset 0 2px 20px hsla(0, 0%, 0%, 0.2); 19 | } 20 | 21 | .big-link--fill { 22 | color: white; 23 | background-color: #8C8; 24 | background-image: linear-gradient( hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.15) ); 25 | } 26 | 27 | .big-link--fill:hover { 28 | color: white; 29 | background-color: #EC5; 30 | } 31 | .big-link--fill:active { 32 | color: white; 33 | background-color: #DB4; 34 | } 35 | 36 | .big-link--stroke { 37 | border: 2px solid #8C8; 38 | } 39 | 40 | .big-link--stroke:hover { border-color: #EC5; } 41 | .big-link--stroke:active { background-color: #F8F8F8; } 42 | 43 | .big-link__icon { 44 | vertical-align: bottom; 45 | width: 30px; 46 | height: 30px; 47 | margin-right: 6px; 48 | } 49 | 50 | .big-link--fill .big-link__icon path { 51 | fill: white; 52 | } 53 | 54 | .big-link--stroke .big-link__icon path { 55 | fill: #6A6; 56 | } 57 | 58 | .big-link--stroke:hover .big-link__icon path { 59 | fill: #E90; 60 | } 61 | 62 | /* ---- large device ---- */ 63 | 64 | @media screen and ( min-width: 768px ) { 65 | 66 | .big-link { 67 | font-size: 1.4rem; 68 | margin-bottom: 10px; 69 | } 70 | 71 | .big-link__icon { 72 | width: 40px; 73 | height: 40px; 74 | } 75 | 76 | } 77 | -------------------------------------------------------------------------------- /modules/big-links/big-links.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 | {{> js-file}} 6 | 7 | 8 | Download 9 | flickity.pkgd.min.js 10 | 11 | 12 |
13 |
14 | 15 | 16 | {{> css-file}} 17 | 18 | 19 | Download 20 | flickity.css 21 | 22 | 23 |
24 |
25 | 26 | {{#unless isExport}} 27 |
28 |
29 | 30 | 31 | {{> zip-file}} 32 | 33 | 34 | Download 35 | these docs 36 | 37 | 38 |
39 |
40 | {{/unless}} 41 | -------------------------------------------------------------------------------- /modules/call-out/call-out.css: -------------------------------------------------------------------------------- 1 | /* call out 2 | ------------------------- */ 3 | 4 | .call-out { 5 | border-top: 2px solid #ED2; 6 | border-bottom: 2px solid #ED2; 7 | padding-left: 40px; 8 | position: relative; 9 | margin: 20px 0; 10 | } 11 | 12 | /* (i) */ 13 | .call-out:before { 14 | content: 'i'; 15 | display: block; 16 | width: 20px; 17 | height: 20px; 18 | position: absolute; 19 | left: 5px; 20 | top: 20px; 21 | background: #ED2; 22 | border-radius: 50%; 23 | text-align: center; 24 | color: white; 25 | font-family: Consolas, Georgia, serif; 26 | font-style: italic; 27 | } 28 | 29 | .call-out h2 { 30 | margin-top: 0; 31 | padding-top: 10px; 32 | border-top: none; 33 | } 34 | 35 | .call-out--chill { border-color: #8C8; } 36 | .call-out--chill:before { background: #8C8; } 37 | 38 | /* ---- call-out--big-copy ---- */ 39 | 40 | .call-out--big-copy p, 41 | .call-out--big-copy li, 42 | .call-out--big-copy li:before { 43 | font-size: 1.2rem; 44 | line-height: 1.2; 45 | } 46 | 47 | /* ---- quick-start-list ---- */ 48 | 49 | .call-out--big-copy ol { 50 | list-style: none; 51 | } 52 | 53 | .quick-start-list li { 54 | position: relative; 55 | counter-increment: call-out-big-copy-item; 56 | } 57 | 58 | .quick-start-list li:before { 59 | content: counter(call-out-big-copy-item) "."; 60 | position: absolute; 61 | left: -1.2rem; 62 | font-size: 1.2rem; 63 | font-weight: bold; 64 | } 65 | 66 | .quick-start-list { 67 | list-style: none; 68 | } 69 | 70 | @media screen and (min-width: 768px) { 71 | 72 | .call-out { 73 | border: 2px solid #ED2; 74 | padding: 10px 20px 10px 80px; 75 | border-radius: 6px; 76 | position: relative; 77 | margin: 20px 0; 78 | } 79 | 80 | .call-out--chill { border-color: #8C8; } 81 | 82 | .call-out:before { 83 | width: 40px; 84 | height: 40px; 85 | left: 20px; 86 | top: 30px; 87 | font-size: 1.9rem; 88 | line-height: 46px; 89 | } 90 | 91 | } 92 | -------------------------------------------------------------------------------- /modules/call-out/fullscreen-call-out.hbs: -------------------------------------------------------------------------------- 1 |
2 |

Fullscreen functionality requires the flickity-fullscreen package. It is not included in flickity.pkgd.js and must be installed separately.

3 |
4 | -------------------------------------------------------------------------------- /modules/carousel/carousel.css: -------------------------------------------------------------------------------- 1 | /* demo carousels 2 | ------------------------- */ 3 | 4 | .carousel { 5 | background: #FAFAFA; 6 | margin-bottom: 30px; 7 | counter-reset: carousel-cell; 8 | } 9 | 10 | .carousel-cell { 11 | width: 66%; 12 | height: 160px; 13 | margin-right: 10px; 14 | margin-bottom: 10px; 15 | background: #8C8; 16 | border-radius: 5px; 17 | counter-increment: carousel-cell; 18 | } 19 | 20 | .flickity-enabled .carousel-cell { margin-bottom: 0; } 21 | 22 | .carousel-cell:before, 23 | .carousel-cell__number { 24 | display: block; 25 | width: 100px; 26 | margin: 0 auto; 27 | content: counter(carousel-cell); 28 | text-align: center; 29 | line-height: 160px; 30 | font-size: 80px; 31 | color: white; 32 | } 33 | 34 | .carousel--not-counting .carousel-cell:before { content: none; } 35 | 36 | /* ---- carousel-image-cell ---- */ 37 | /* frames single image in cell */ 38 | 39 | .carousel-image-cell { 40 | width: 66%; 41 | height: 200px; 42 | margin-right: 10px; 43 | background: #222; 44 | /* center images */ 45 | display: flex; 46 | align-items: center; 47 | justify-content: center; 48 | } 49 | 50 | .carousel-image-cell img { 51 | display: block; 52 | max-height: 100%; 53 | } 54 | 55 | .carousel-image-cell--wide { 56 | width: 100%; 57 | } 58 | 59 | .carousel.is-fullscreen .carousel-image-cell { 60 | background: transparent; 61 | } 62 | 63 | /* ---- carousel__natural-image ---- */ 64 | /* use natural sizes for cell size */ 65 | 66 | .carousel__natural-image { 67 | display: block; 68 | height: 200px; 69 | min-width: 150px; 70 | max-width: 100%; 71 | margin-right: 10px; 72 | } 73 | 74 | /* ---- style ---- */ 75 | 76 | .carousel--full-width .carousel-cell { 77 | width: 100%; 78 | } 79 | 80 | .carousel--half-width .carousel-cell { 81 | width: 50%; 82 | } 83 | 84 | .carousel--various-widths .carousel-cell { width: 33%; } 85 | .carousel--various-widths .carousel-cell.size-180 { width: 180px; } 86 | .carousel--various-widths .carousel-cell.size-large { width: 75%; } 87 | 88 | .carousel--media-queried .carousel-cell { 89 | width: 100%; 90 | } 91 | 92 | .carousel--selected-cell .carousel-cell.is-selected { background: #ED2; } 93 | 94 | .carousel--carousel-focus:focus .flickity-viewport { 95 | outline: thin dotted; 96 | outline: 5px auto -webkit-focus-ring-color; 97 | } 98 | 99 | /* ---- show-several ---- */ 100 | 101 | .carousel--show-several .carousel-cell { width: 28%; } 102 | 103 | /* ---- cell-selector ---- */ 104 | 105 | .carousel--cell-selector { position: relative; } 106 | 107 | /* ---- images-loaded ---- */ 108 | 109 | .carousel--images-loaded-demo img { 110 | display: block; 111 | height: 160px; 112 | } 113 | 114 | .carousel--images-demo { 115 | margin-bottom: 40px; 116 | } 117 | 118 | .carousel--images-demo img { 119 | display: block; 120 | height: 160px; 121 | } 122 | 123 | /* ---- carousel--pixel-position-demo ---- */ 124 | 125 | .carousel--pixel-position-demo .carousel-cell { width: 300px; } 126 | 127 | /* ---- carousel--100-width-height ---- */ 128 | 129 | .carousel--full-bleed { height: 100%; } 130 | 131 | .carousel--full-bleed .carousel-cell { height: 100%; } 132 | 133 | /* move page dots into carousel*/ 134 | .carousel--full-bleed .flickity-page-dots { bottom: 10px; } 135 | 136 | /* ---- carousel--set-carousel-size-disabled ---- */ 137 | 138 | .carousel--set-carousel-size-disabled { height: 160px; } 139 | .carousel--set-carousel-size-disabled .carousel-cell { height: 100%; } 140 | 141 | .carousel--set-carousel-size-disabled-percentage { padding-bottom: 50%; } 142 | .carousel--set-carousel-size-disabled-percentage .flickity-viewport { 143 | position: absolute; 144 | width: 100%; 145 | } 146 | .carousel--set-carousel-size-disabled-percentage .carousel-cell { height: 100%; } 147 | 148 | /* ---- resize-option ---- */ 149 | 150 | .carousel--resize-option { 151 | width: 300px; 152 | } 153 | 154 | /* ---- adaptive-height ---- */ 155 | 156 | .carousel-cell--adapt-height2 { height: 240px; } 157 | .carousel-cell--adapt-height3 { height: 320px; } 158 | 159 | .carousel--transition-adaptive-height .flickity-viewport { 160 | transition: height 0.2s; 161 | } 162 | 163 | /* ---- bg-lazyload ---- */ 164 | 165 | .carousel--bg-lazyload .carousel-cell { 166 | background-size: cover; 167 | background-position: center center; 168 | height: 220px; 169 | } 170 | 171 | /* ---- bg-lazyload ---- */ 172 | 173 | .carousel--fade { 174 | background: #222; 175 | } 176 | 177 | /* ---- large device media query ---- */ 178 | 179 | @media screen and ( min-width: 768px ) { 180 | 181 | .carousel--media-queried .carousel-cell { width: 50%; } 182 | 183 | .carousel--images-demo img { 184 | height: 400px; 185 | } 186 | } 187 | -------------------------------------------------------------------------------- /modules/demos/append/append.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 |
7 | 1 8 |
9 |
10 | 2 11 |
12 |
13 | 3 14 |
15 |
16 | {{> edit-demo default="qExRVp" vanillaJS="OPQWOG" }} 17 |
18 | -------------------------------------------------------------------------------- /modules/demos/append/append.js: -------------------------------------------------------------------------------- 1 | FlickityDocs.append = function( elem ) { 2 | 3 | let carousel = elem.querySelector('.carousel'); 4 | let flkty = new Flickity( carousel, { 5 | initialIndex: 2, 6 | } ); 7 | 8 | let cellNumber = flkty.cells.length + 1; 9 | let makeCellElem = FlickityDocs.makeCellElem; 10 | 11 | let button = elem.querySelector('.button'); 12 | button.addEventListener( 'click', function() { 13 | flkty.append([ makeCellElem( cellNumber++ ), makeCellElem( cellNumber++ ) ]); 14 | } ); 15 | 16 | }; 17 | -------------------------------------------------------------------------------- /modules/demos/arrow-wiz/arrow-wiz.css: -------------------------------------------------------------------------------- 1 | /* arrow-wiz 2 | ------------------------- */ 3 | 4 | .arrow-wiz-illo { 5 | position: relative; 6 | width: 230px; 7 | height: 230px; 8 | margin-right: 20px; 9 | float: left; 10 | } 11 | 12 | .arrow-wiz-illo__canvas { 13 | position: absolute; 14 | left: 30px; 15 | } 16 | 17 | .arrow-wiz-illo__graph-label { 18 | display: block; 19 | position: absolute; 20 | font-size: 0.85rem; 21 | } 22 | 23 | .arrow-wiz-illo__graph-label--y { 24 | text-align: right; 25 | width: 20px; 26 | } 27 | 28 | .arrow-wiz-illo__graph-label--y-pos50 { 29 | top: -5px; 30 | } 31 | 32 | 33 | .arrow-wiz-illo__graph-label--y-0 { 34 | top: 92px; 35 | } 36 | 37 | .arrow-wiz-illo__graph-label--y-neg50 { 38 | top: 190px; 39 | } 40 | 41 | .arrow-wiz-illo__graph-label--x { 42 | top: 200px; 43 | } 44 | 45 | .arrow-wiz-illo__graph-label--x-0 { 46 | left: 30px; 47 | } 48 | 49 | .arrow-wiz-illo__graph-label--x-50 { 50 | left: 125px; 51 | } 52 | 53 | .arrow-wiz-illo__graph-label--x-100 { 54 | right: 0; 55 | } 56 | 57 | /* ---- points ---- */ 58 | 59 | .arrow-wiz-illo__top-well { 60 | position: absolute; 61 | /* background: hsla(0, 100%, 50%, 0.1); */ 62 | width: 220px; 63 | height: 120px; 64 | left: 20px; 65 | top: -10px; 66 | } 67 | 68 | .arrow-wiz-illo__center-well { 69 | position: absolute; 70 | /* background: hsla(0, 100%, 50%, 0.1); */ 71 | width: 220px; 72 | height: 20px; 73 | left: 20px; 74 | top: 90px; 75 | } 76 | 77 | 78 | .arrow-wiz-illo__point { 79 | position: absolute; 80 | width: 20px; 81 | height: 20px; 82 | } 83 | 84 | .arrow-wiz-illo__point:hover, 85 | .arrow-wiz-illo__point.is-dragging { 86 | z-index: 2; /* above other points */ 87 | } 88 | 89 | .arrow-wiz-illo__point--0, 90 | .arrow-wiz-illo__point--3 { 91 | cursor: ew-resize; 92 | } 93 | 94 | .arrow-wiz-illo__point--1, 95 | .arrow-wiz-illo__point--2 { 96 | cursor: move; 97 | } 98 | 99 | .arrow-wiz-illo__point--0 { 100 | left: 20px; 101 | } 102 | 103 | .arrow-wiz-illo__point--1 { 104 | left: 120px; 105 | top: 0; 106 | } 107 | 108 | .arrow-wiz-illo__point--2 { 109 | left: 140px; 110 | top: 20px; 111 | } 112 | 113 | .arrow-wiz-illo__point--3 { 114 | left: 60px; 115 | } 116 | 117 | 118 | .arrow-wiz-illo__point__dot { 119 | position: absolute; 120 | width: 20px; 121 | height: 20px; 122 | background: #333; 123 | border-radius: 10px; 124 | opacity: 1; 125 | transform: scale(0.5); 126 | transition: transform 0.2s, opacity 0.2s; 127 | } 128 | 129 | .arrow-wiz-illo__point:hover .arrow-wiz-illo__point__dot, 130 | .arrow-wiz-illo__point.is-dragging .arrow-wiz-illo__point__dot { 131 | opacity: 1; 132 | transform: scale(1); 133 | } 134 | 135 | .arrow-wiz-illo__point__label { 136 | display: block; 137 | position: absolute; 138 | font-size: 0.9rem; 139 | width: 45px; 140 | border-radius: 5px; 141 | background: #333; 142 | color: white; 143 | text-align: center; 144 | left: 30px; 145 | opacity: 0; 146 | transform: translateX(-5px); 147 | transition: transform 0.2s, opacity 0.2s; 148 | transform-origin: left top; 149 | pointer-events: none; 150 | } 151 | 152 | .arrow-wiz-illo__point:hover .arrow-wiz-illo__point__label, 153 | .arrow-wiz-illo__point.is-dragging .arrow-wiz-illo__point__label { 154 | opacity: 1; 155 | transform: translateX(0px); 156 | } 157 | -------------------------------------------------------------------------------- /modules/demos/arrow-wiz/arrow-wiz.hbs: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 |
6 | 50 8 | 0 10 | -50 12 | 0 14 | 50 16 | 100 18 | 19 | 20 | 21 |
22 |
23 |
24 |
x1, y1
25 |
26 |
27 |
28 |
x2, y2
29 |
30 |
31 | 32 |
33 |
34 |
35 |
x0
36 |
37 |
38 |
39 |
x3
40 |
41 |
42 | 43 |
44 | 45 |
46 | 47 |
48 | 49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 | {{> edit-demo default="vOeKpJ" }} 58 |
59 | 60 | 61 |
-------------------------------------------------------------------------------- /modules/demos/arrow-wiz/arrow-wiz.js: -------------------------------------------------------------------------------- 1 | FlickityDocs['arrow-wiz'] = function( elem ) { 2 | 3 | let wiz = elem; 4 | 5 | let canvas = wiz.querySelector('canvas'); 6 | let ctx = canvas.getContext('2d'); 7 | let canvasWidth = canvas.width; 8 | let canvasHeight = canvas.height; 9 | 10 | /* eslint-disable-next-line max-params */ 11 | function line( ax, ay, bx, by, color ) { 12 | if ( color ) { 13 | ctx.strokeStyle = color; 14 | } 15 | ctx.beginPath(); 16 | ctx.moveTo( ax, ay ); 17 | ctx.lineTo( bx, by ); 18 | ctx.stroke(); 19 | ctx.closePath(); 20 | } 21 | 22 | let lightLineColor = 'hsla(210, 50%, 50%, 0.25)'; 23 | let darkLineColor = 'hsla(210, 50%, 50%, 0.5)'; 24 | 25 | function renderGrid() { 26 | let i, color; 27 | for ( i = 0; i < 11; i++ ) { 28 | let y = i * 20 + 0.5; 29 | color = i % 5 ? lightLineColor : darkLineColor; 30 | line( 0, y, canvasWidth, y, color ); 31 | } 32 | for ( i = 0; i < 11; i++ ) { 33 | let x = i * 20 + 0.5; 34 | color = i % 5 ? lightLineColor : darkLineColor; 35 | line( x, 0, x, canvasHeight, color ); 36 | } 37 | 38 | line( 0, canvasHeight - 0.5, canvasWidth, canvasHeight - 0.5, darkLineColor ); 39 | line( canvasWidth - 0.5, 0, canvasWidth - 0.5, canvasHeight, darkLineColor ); 40 | } 41 | 42 | renderGrid(); 43 | 44 | // ----- control points ----- // 45 | 46 | let controlPoints = []; 47 | 48 | let draggies = []; 49 | for ( let i = 0; i < 4; i++ ) { 50 | let pointElem = wiz.querySelector( '.arrow-wiz-illo__point--' + i ); 51 | let draggie = new Draggabilly( pointElem, { 52 | containment: true, 53 | grid: [ 10, 10 ], 54 | } ); 55 | let onDragMove = getOnDragMove( draggie, i ); 56 | draggie.on( 'dragMove', onDragMove ); 57 | draggies.push( draggie ); 58 | controlPoints[i] = calcDraggiePoint( draggie ); 59 | } 60 | 61 | function getOnDragMove( draggie, index ) { 62 | return function onDragMove() { 63 | // set control point 64 | let point = calcDraggiePoint( draggie ); 65 | controlPoints[ index ] = point; 66 | render(); 67 | }; 68 | } 69 | 70 | function calcDraggiePoint( draggie ) { 71 | return { 72 | x: draggie.position.x / 2, 73 | y: 50 - draggie.position.y / 2, 74 | }; 75 | } 76 | 77 | function renderArrow() { 78 | ctx.strokeStyle = '#333'; 79 | ctx.fillStyle = 'hsla(0, 0%, 0%, 0.4)'; 80 | ctx.beginPath(); 81 | ctx.moveTo( controlPoints[0].x * 2, 100 ); 82 | ctx.lineTo( controlPoints[1].x * 2, 100 - controlPoints[1].y * 2 ); 83 | ctx.lineTo( controlPoints[2].x * 2, 100 - controlPoints[2].y * 2 ); 84 | ctx.lineTo( controlPoints[3].x * 2, 100 ); 85 | ctx.lineTo( controlPoints[2].x * 2, 100 + controlPoints[2].y * 2 ); 86 | ctx.lineTo( controlPoints[1].x * 2, 100 + controlPoints[1].y * 2 ); 87 | ctx.lineTo( controlPoints[0].x * 2, 100 ); 88 | ctx.fill(); 89 | ctx.stroke(); 90 | ctx.closePath(); 91 | } 92 | 93 | function renderCanvas() { 94 | ctx.clearRect( 0, 0, canvasWidth, canvasHeight ); 95 | renderGrid(); 96 | renderArrow(); 97 | } 98 | 99 | // ----- ----- // 100 | 101 | let codeElem = wiz.querySelector('.arrow-wiz-code code'); 102 | 103 | function renderCode() { 104 | codeElem.textContent = 'arrowShape: { \n' + 105 | ' x0: ' + controlPoints[0].x + ',\n' + 106 | ' x1: ' + controlPoints[1].x + ', y1: ' + controlPoints[1].y + ',\n' + 107 | ' x2: ' + controlPoints[2].x + ', y2: ' + controlPoints[2].y + ',\n' + 108 | ' x3: ' + controlPoints[3].x + '\n' + 109 | '}'; 110 | } 111 | 112 | // ----- ----- // 113 | 114 | let flkty = new Flickity( wiz.querySelector('.carousel'), { 115 | initialIndex: 2, 116 | } ); 117 | let prevPath = flkty.prevButton.element.querySelector('path'); 118 | let nextPath = flkty.nextButton.element.querySelector('path'); 119 | 120 | function renderFlickity() { 121 | let movements = 'M ' + controlPoints[0].x + ',50' + 122 | ' L ' + controlPoints[1].x + ',' + ( 50 + controlPoints[1].y ) + 123 | ' L ' + controlPoints[2].x + ',' + ( 50 + controlPoints[2].y ) + 124 | ' L ' + controlPoints[3].x + ',50 ' + 125 | ' L ' + controlPoints[2].x + ',' + ( 50 - controlPoints[2].y ) + 126 | ' L ' + controlPoints[1].x + ',' + ( 50 - controlPoints[1].y ) + 127 | ' Z'; 128 | prevPath.setAttribute( 'd', movements ); 129 | nextPath.setAttribute( 'd', movements ); 130 | } 131 | 132 | // ----- ----- // 133 | 134 | function render() { 135 | renderCanvas(); 136 | renderCode(); 137 | renderFlickity(); 138 | } 139 | 140 | render(); 141 | 142 | }; 143 | -------------------------------------------------------------------------------- /modules/demos/as-nav-for/as-nav-for.css: -------------------------------------------------------------------------------- 1 | /* ---- as-nav-for / carousel-nav ---- */ 2 | 3 | .carousel--as-nav-for-main { margin-bottom: 40px; } 4 | 5 | .carousel--nav .carousel-cell { 6 | height: 80px; 7 | width: 100px; 8 | } 9 | 10 | .carousel--nav .carousel-cell:before { 11 | font-size: 50px; 12 | line-height: 80px; 13 | } 14 | 15 | .carousel--nav .carousel-cell.is-nav-selected { 16 | background: #ED2; 17 | } 18 | -------------------------------------------------------------------------------- /modules/demos/as-nav-for/as-nav-for.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | {{> edit-demo default="wByaqj" }} 22 |
23 | -------------------------------------------------------------------------------- /modules/demos/auto-play/auto-play.hbs: -------------------------------------------------------------------------------- 1 |

autoPlay

2 | 3 |

Automatically advances to the next cell.

4 | 5 |

Auto-playing will pause when mouse is hovered over, and resume when mouse is hovered off. Auto-playing will stop when the carousel is clicked or a cell is selected.

6 | 7 |
8 |
9 | ``` js 10 | autoPlay: true 11 | // advance cells every 3 seconds 12 | ``` 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | {{> edit-demo default="RNQwaB" }} 23 |
24 |
25 | 26 |
27 |
28 | ``` js 29 | autoPlay: 1500 // {Number} 30 | // advance cells ever {Number} milliseconds 31 | // 1500 will advance cells every 1.5 seconds 32 | ``` 33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | {{> edit-demo default="NPyWRZ" }} 43 |
44 |
45 | -------------------------------------------------------------------------------- /modules/demos/cell-align/cell-align.hbs: -------------------------------------------------------------------------------- 1 |

cellAlign

2 | 3 |

Align cells within the carousel element.

4 | 5 |
6 |
7 | ``` js 8 | cellAlign: 'left' 9 | ``` 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | {{> edit-demo default="MYQwbx" }} 18 |
19 |
20 | 21 |
22 |
23 | ``` js 24 | // default cellAlign: 'center' 25 | ``` 26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | {{> edit-demo default="azqbop" }} 34 |
35 |
36 | 37 |
38 |
39 | ``` js 40 | cellAlign: 'right' 41 | ``` 42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | {{> edit-demo default="ogEXBL" }} 50 |
51 |
52 | -------------------------------------------------------------------------------- /modules/demos/cell-selector/cell-selector.css: -------------------------------------------------------------------------------- 1 | /* ---- cell-selector-demo ---- */ 2 | 3 | .static-banner { 4 | position: absolute; 5 | background: hsla(0, 0%, 0%, 0.3); 6 | z-index: 1; 7 | padding: 2px 20px; 8 | color: white; 9 | pointer-events: none; 10 | } 11 | 12 | .static-banner1 { 13 | left: 10px; 14 | top: 10px; 15 | } 16 | 17 | .static-banner2 { 18 | right: 10px; 19 | bottom: 10px; 20 | } 21 | -------------------------------------------------------------------------------- /modules/demos/cell-selector/cell-selector.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
Static banner 1
4 |
Static banner 2
5 |
6 |
7 |
8 |
9 |
10 |
11 | {{> edit-demo default="xOXVPg" }} 12 |
13 | -------------------------------------------------------------------------------- /modules/demos/contain/contain.hbs: -------------------------------------------------------------------------------- 1 |

contain

2 | 3 |

Contains cells to carousel element to prevent excess scroll at beginning or end. Has no effect if wrapAround: true.

4 | 5 |
6 |
7 | ``` js 8 | contain: true 9 | ``` 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | {{> edit-demo default="QwQbdV" }} 20 |
21 |
22 | -------------------------------------------------------------------------------- /modules/demos/custom-nav/custom-nav.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | {{> edit-demo default="jEZwxb" vanillaJS="emVRjv" }} 21 |
22 | -------------------------------------------------------------------------------- /modules/demos/custom-nav/custom-nav.js: -------------------------------------------------------------------------------- 1 | FlickityDocs['custom-nav'] = function( elem ) { 2 | 3 | let carousel = elem.querySelector('.carousel'); 4 | let flkty = new Flickity( carousel, { 5 | prevNextButtons: false, 6 | pageDots: false, 7 | } ); 8 | 9 | let cellsButtonGroup = elem.querySelector('.button-group--cells'); 10 | let cellsButtons = utils.makeArray( cellsButtonGroup.children ); 11 | 12 | flkty.on( 'select', function() { 13 | let previousSelectedButton = cellsButtonGroup.querySelector('.is-selected'); 14 | let selectedButton = cellsButtonGroup.children[ flkty.selectedIndex ]; 15 | previousSelectedButton.classList.remove('is-selected'); 16 | selectedButton.classList.add('is-selected'); 17 | } ); 18 | 19 | filterBind( cellsButtonGroup, 'click', '.button', function( event ) { 20 | let index = cellsButtons.indexOf( event.target ); 21 | flkty.select( index ); 22 | } ); 23 | 24 | let previousButton = elem.querySelector('.button--previous'); 25 | previousButton.addEventListener( 'click', function() { 26 | flkty.previous(); 27 | } ); 28 | 29 | let nextButton = elem.querySelector('.button--next'); 30 | nextButton.addEventListener( 'click', function() { 31 | flkty.next(); 32 | } ); 33 | 34 | }; 35 | -------------------------------------------------------------------------------- /modules/demos/destroy/destroy.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | {{> edit-demo default="dPdNQq" vanillaJS="emVgoR" }} 13 |
14 | -------------------------------------------------------------------------------- /modules/demos/destroy/destroy.js: -------------------------------------------------------------------------------- 1 | FlickityDocs.destroy = function( elem ) { 2 | 3 | let carousel = elem.querySelector('.carousel'); 4 | let flkty = new Flickity( carousel ); 5 | let isFlickity = true; 6 | 7 | let button = elem.querySelector('.button'); 8 | button.addEventListener( 'click', function() { 9 | if ( isFlickity ) { 10 | flkty.destroy(); 11 | } else { 12 | flkty = new Flickity( carousel ); 13 | } 14 | isFlickity = !isFlickity; 15 | } ); 16 | 17 | }; 18 | -------------------------------------------------------------------------------- /modules/demos/events-table/events-table.css: -------------------------------------------------------------------------------- 1 | /* event-table 2 | ------------------------- */ 3 | 4 | .event-table { 5 | width: 100%; 6 | } 7 | 8 | .event-table th, 9 | .event-table td { 10 | } 11 | 12 | .event-table td { 13 | font-size: 0.9rem; 14 | } 15 | 16 | td.event-table__time { 17 | font-size: 0.9rem; 18 | } 19 | 20 | .event-table__message { 21 | width: 100%; 22 | } 23 | -------------------------------------------------------------------------------- /modules/demos/events-table/events-table.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
TimeEvent
19 |
20 |
21 | -------------------------------------------------------------------------------- /modules/demos/events-table/events-table.js: -------------------------------------------------------------------------------- 1 | FlickityDocs['events-table'] = function( elem ) { 2 | 3 | let table = elem.querySelector('.event-table'); 4 | let tbody = table.querySelector('tbody'); 5 | 6 | let carousel = elem.querySelector('.carousel'); 7 | let flkty = new Flickity( carousel, { 8 | on: { 9 | ready: function() { 10 | logEvent('ready'); 11 | }, 12 | }, 13 | } ); 14 | 15 | function logEvent( type, message ) { 16 | let row = document.createElement('tr'); 17 | let timeCell = document.createElement('td'); 18 | let eventCell = document.createElement('td'); 19 | let messageCell = document.createElement('td'); 20 | timeCell.className = 'event-table__time'; 21 | eventCell.className = 'event-table__event'; 22 | messageCell.className = 'event-table__message'; 23 | let now = new Date(); 24 | let timestamp = now.getHours() + ':' + now.getMinutes() + ':' + 25 | now.getSeconds() + '.' + now.getMilliseconds(); 26 | timeCell.textContent = timestamp; 27 | eventCell.textContent = type; 28 | messageCell.textContent = message || ''; 29 | row.appendChild( timeCell ); 30 | row.appendChild( eventCell ); 31 | row.appendChild( messageCell ); 32 | let rows = tbody.children; 33 | if ( rows.length === 1 ) { 34 | tbody.appendChild( row ); 35 | } else { 36 | tbody.insertBefore( row, rows[1] ); 37 | } 38 | 39 | let lastRow = tbody.children[11]; 40 | if ( lastRow ) { 41 | tbody.removeChild( lastRow ); 42 | } 43 | } 44 | 45 | flkty.on( 'change', function( index ) { 46 | logEvent( 'change', 'changed to cell ' + ( index + 1 ) ); 47 | } ); 48 | 49 | flkty.on( 'select', function( index ) { 50 | logEvent( 'select', 'selected cell ' + ( index + 1 ) ); 51 | } ); 52 | 53 | flkty.on( 'settle', function( index ) { 54 | logEvent( 'settle', 'settled at cell ' + ( index + 1 ) ); 55 | } ); 56 | 57 | flkty.on( 'staticClick', function( event, pointer, cellElem, cellIndex ) { 58 | let message = cellElem ? 'clicked cell ' + cellIndex : ''; 59 | logEvent( 'staticClick', message ); 60 | } ); 61 | 62 | function getListener( eventType ) { 63 | return function() { 64 | logEvent( eventType ); 65 | }; 66 | } 67 | 68 | // add generic listeners for these event types 69 | [ 70 | 'dragStart', 71 | 'dragMove', 72 | 'dragEnd', 73 | 'pointerDown', 74 | 'pointerMove', 75 | 'pointerUp', 76 | ].forEach( function( eventType ) { 77 | let listener = getListener( eventType ); 78 | flkty.on( eventType, listener ); 79 | } ); 80 | 81 | }; 82 | -------------------------------------------------------------------------------- /modules/demos/free-scroll/free-scroll.hbs: -------------------------------------------------------------------------------- 1 |

freeScroll

2 | 3 |

Enables content to be freely scrolled and flicked without aligning cells to an end position.

4 | 5 |
6 |
7 | ``` js 8 | freeScroll: true 9 | ``` 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | {{> edit-demo default="bNLGNZ" }} 20 |
21 |
22 | 23 |

Enable freeScroll and contain for a simple horizontal scroller.

24 | 25 |
26 |
27 | ``` js 28 | freeScroll: true, 29 | contain: true, 30 | // disable previous & next buttons and dots 31 | prevNextButtons: false, 32 | pageDots: false 33 | ``` 34 |
35 |
36 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | {{> edit-demo default="zxRYGo" }} 45 |
46 |
47 | 48 |

Enable freeScroll and wrapAround and you can flick forever, man.

49 | 50 |
51 |
52 | ``` js 53 | freeScroll: true, 54 | wrapAround: true 55 | ``` 56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 | {{> edit-demo default="GgQRJX" }} 66 |
67 |
68 | -------------------------------------------------------------------------------- /modules/demos/fullscreen/fullscreen.css: -------------------------------------------------------------------------------- 1 | /* fullscreen 2 | ------------------------- */ 3 | 4 | .carousel.is-fullscreen { 5 | z-index: 3; /* above site-footer */ 6 | } 7 | 8 | .carousel.is-fullscreen .carousel-cell, 9 | .carousel.is-fullscreen .carousel-image-cell { 10 | height: 100%; 11 | } 12 | 13 | /* ---- .carousel-cell--fullscreen-image img ---- */ 14 | 15 | .carousel__natural-image--fullscreen { 16 | /* HACK vertically center */ 17 | /* could use flexbox, but doesn't work in Chrome & Safari */ 18 | top: 50%; 19 | position: relative; 20 | transform: translateY(-50%) 21 | } 22 | 23 | .carousel.is-fullscreen .carousel__natural-image--fullscreen { 24 | height: auto; 25 | max-height: 100%; 26 | } 27 | 28 | /* ---- carousel-image-cell ---- */ 29 | 30 | .carousel.is-fullscreen .carousel-image-cell img { 31 | max-width: 100%; 32 | } 33 | 34 | /* ---- ---- */ 35 | 36 | /* HACK, iOS adds width from font-size in button */ 37 | .flickity-fullscreen-button { 38 | font-size: 12px; 39 | } 40 | -------------------------------------------------------------------------------- /modules/demos/fullscreen/view-fullscreen-demo.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | {{> edit-demo default="WzGgYL" vanillaJS="zWKJmv" }} 13 |
14 | -------------------------------------------------------------------------------- /modules/demos/fullscreen/view-fullscreen-demo.js: -------------------------------------------------------------------------------- 1 | FlickityDocs['view-fullscreen-demo'] = function( elem ) { 2 | 3 | let carousel = elem.querySelector('.carousel'); 4 | let flkty = new Flickity( carousel, { 5 | fullscreen: true, 6 | } ); 7 | 8 | let button = elem.querySelector('.button'); 9 | button.addEventListener( 'click', function() { 10 | flkty.viewFullscreen(); 11 | } ); 12 | 13 | }; 14 | -------------------------------------------------------------------------------- /modules/demos/imagesloaded/imagesloaded.hbs: -------------------------------------------------------------------------------- 1 |

imagesLoaded

2 | 3 |

Unloaded images have no size, which can throw off cell positions. To fix this, the imagesLoaded option re-positions cells once their images have loaded.

4 | 5 |
6 |
7 | ``` js 8 | imagesLoaded: true 9 | ``` 10 |
11 |
12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | {{> edit-demo default="MYQWEe" }} 21 |
22 |
23 | 24 |
25 |

imagesLoaded requires the flickity-imagesloaded package. It already is included with flickity.pkgd.js, but not with Flickity as a stand-alone package. If you are using Webpack or RequireJS without flickity.pkgd.js, you need to install and require flickity-imagesloaded separately. See details in Extras.

26 |
27 | -------------------------------------------------------------------------------- /modules/demos/insert/insert.js: -------------------------------------------------------------------------------- 1 | FlickityDocs.insert = function( elem ) { 2 | 3 | let carousel = elem.querySelector('.carousel'); 4 | let flkty = new Flickity( carousel, { 5 | initialIndex: 1, 6 | } ); 7 | 8 | let cellNumber = flkty.cells.length + 1; 9 | let makeCellElem = FlickityDocs.makeCellElem; 10 | 11 | let button = elem.querySelector('.button'); 12 | button.addEventListener( 'click', function() { 13 | let cellElems = [ makeCellElem( cellNumber++ ), makeCellElem( cellNumber++ ) ]; 14 | flkty.insert( cellElems, 2 ); 15 | } ); 16 | 17 | }; 18 | -------------------------------------------------------------------------------- /modules/demos/keyhole/keyhole-content.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | orange tree 4 |
5 |
6 | freedom tower 7 |
8 |
9 | drizzle 10 |
11 |
12 | cat nose 13 |
14 |
15 | contrail 16 |
17 |
18 | sunset 19 |
20 |
21 | planes 22 |
23 |
24 | {{> edit-demo default="jAGWRQ" vanillaJS="qNPbgb" }} 25 | -------------------------------------------------------------------------------- /modules/demos/keyhole/keyhole.css: -------------------------------------------------------------------------------- 1 | /* ---- keyhole ---- */ 2 | 3 | .keyhole-cell { 4 | margin-right: 20px; 5 | overflow: hidden; 6 | } 7 | 8 | .keyhole-cell img { 9 | display: block; 10 | height: 260px; 11 | } 12 | -------------------------------------------------------------------------------- /modules/demos/keyhole/keyhole.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{> keyhole-content }} 3 |
4 | -------------------------------------------------------------------------------- /modules/demos/keyhole/keyhole.js: -------------------------------------------------------------------------------- 1 | FlickityDocs.keyhole = function( elem ) { 2 | 3 | let transformProp = typeof elem.style.transform == 'string' ? 4 | 'transform' : 'WebkitTransform'; 5 | 6 | let carousel = elem.querySelector('.carousel'); 7 | let flkty = new Flickity( carousel, { 8 | imagesLoaded: true, 9 | } ); 10 | 11 | let imgs = carousel.querySelectorAll('.keyhole-cell img'); 12 | 13 | flkty.on( 'scroll', function() { 14 | flkty.slides.forEach( function( slide, i ) { 15 | let img = imgs[i]; 16 | let x = ( slide.target + flkty.x ) * -1/3; 17 | img.style[ transformProp ] = 'translateX(' + x + 'px)'; 18 | } ); 19 | } ); 20 | }; 21 | -------------------------------------------------------------------------------- /modules/demos/lazy-load/lazy-cell-images.hbs: -------------------------------------------------------------------------------- 1 |
2 | tulip 4 |
5 |
6 | grapes 8 |
9 |
10 | raspberries 12 |
13 |
14 | wolf 16 |
17 |
18 | sea 20 |
21 |
22 | green beads 24 |
25 |
26 | gulls 28 |
29 |
30 | touch 32 |
33 |
34 | van 36 |
37 | -------------------------------------------------------------------------------- /modules/demos/lazy-load/lazy-load.css: -------------------------------------------------------------------------------- 1 | /* ---- lazyload ---- */ 2 | 3 | /* ---- carousel__lazy-image ---- */ 4 | /* general purpose */ 5 | 6 | .carousel__lazy-image { 7 | opacity: 0; 8 | transition: opacity 0.4s; 9 | } 10 | /* fade in lazy loaded image */ 11 | .carousel__lazy-image.flickity-lazyloaded, 12 | .carousel__lazy-image.flickity-lazyerror { 13 | opacity: 1; 14 | } 15 | 16 | /* ---- lazyload-adj-cells ---- */ 17 | 18 | .carousel--lazyload-adj-cells .carousel-image-cell { 19 | width: 25%; 20 | } 21 | -------------------------------------------------------------------------------- /modules/demos/lazy-load/lazy-srcset-images.hbs: -------------------------------------------------------------------------------- 1 |
2 | walrus 9 |
10 |
11 | bokeh 18 |
19 |
20 | strawberries 27 |
28 |
29 | wolf 36 |
37 |
38 | orange tree 45 |
46 |
47 | tulip 54 |
55 | -------------------------------------------------------------------------------- /modules/demos/line-dots/line-dots.css: -------------------------------------------------------------------------------- 1 | /* ---- line-dots ---- */ 2 | 3 | .carousel--line-dots .flickity-page-dots { 4 | bottom: -22px; 5 | } 6 | 7 | .carousel--line-dots .flickity-page-dots .dot { 8 | height: 4px; 9 | width: 40px; 10 | margin: 0; 11 | border-radius: 0; 12 | } 13 | -------------------------------------------------------------------------------- /modules/demos/line-dots/line-dots.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | {{> edit-demo default="ByYyao" }} 10 |
11 | -------------------------------------------------------------------------------- /modules/demos/next/next.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | {{> edit-demo default="JopYby" vanillaJS="gbvaLQ" }} 14 |
15 | -------------------------------------------------------------------------------- /modules/demos/next/next.js: -------------------------------------------------------------------------------- 1 | FlickityDocs.next = function( elem ) { 2 | 3 | let carousel = elem.querySelector('.carousel'); 4 | let flkty = new Flickity( carousel ); 5 | 6 | let nextButton = elem.querySelector('.button--next'); 7 | nextButton.addEventListener( 'click', function() { 8 | flkty.next(); 9 | } ); 10 | 11 | let nextWrappedButton = elem.querySelector('.button--next-wrapped'); 12 | nextWrappedButton.addEventListener( 'click', function() { 13 | flkty.next( true ); 14 | } ); 15 | 16 | }; 17 | -------------------------------------------------------------------------------- /modules/demos/o-dots/o-dots.css: -------------------------------------------------------------------------------- 1 | /* ---- o dots ---- */ 2 | 3 | .carousel--o-dots .flickity-page-dots { 4 | bottom: 0px; 5 | } 6 | 7 | .carousel--o-dots .flickity-page-dots .dot { 8 | width: 12px; 9 | height: 12px; 10 | opacity: 1; 11 | background: transparent; 12 | border: 2px solid white; 13 | } 14 | 15 | .carousel--o-dots .flickity-page-dots .dot.is-selected { 16 | background: white; 17 | } 18 | -------------------------------------------------------------------------------- /modules/demos/o-dots/o-dots.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | {{> edit-demo default="EaQaYL" }} 10 |
11 | -------------------------------------------------------------------------------- /modules/demos/parallax/parallax.css: -------------------------------------------------------------------------------- 1 | /* parallax 2 | ------------------------- */ 3 | 4 | .parallax { 5 | position: relative; 6 | overflow-x: hidden; 7 | } 8 | 9 | .carousel.carousel--parallax { 10 | background: transparent; 11 | } 12 | 13 | .carousel--parallax .carousel-cell { 14 | opacity: 0.6; 15 | height: 220px; 16 | width: 50%; 17 | margin: 40px 5%; 18 | } 19 | 20 | .parallax__layer { 21 | position: absolute; 22 | left: 0; 23 | top: 0; 24 | } 25 | 26 | .parallax__layer--bg { 27 | top: 70px; 28 | width: 80%; 29 | height: 160px; 30 | } 31 | 32 | .parallax__layer--fg { 33 | pointer-events: none; 34 | width: 125%; 35 | height: 300px; 36 | } 37 | 38 | .parallax__layer__cell { 39 | position: absolute; 40 | width: 50%; 41 | margin: 0 5%; 42 | height: 100%; 43 | } 44 | 45 | .parallax__layer__cell:nth-child(1) { left: 0%; } 46 | .parallax__layer__cell:nth-child(2) { left: 60%; } 47 | .parallax__layer__cell:nth-child(3) { left: 120%; } 48 | .parallax__layer__cell:nth-child(4) { left: 180%; } 49 | .parallax__layer__cell:nth-child(5) { left: 240%; } 50 | 51 | .parallax__layer__cell--bg { 52 | background: hsla(210, 100%, 50%, 0.4); 53 | } 54 | 55 | .parallax__layer__cell--fg { 56 | background: hsla(60, 100%, 50%, 0.4); 57 | } 58 | -------------------------------------------------------------------------------- /modules/demos/parallax/parallax.hbs: -------------------------------------------------------------------------------- 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 | {{> edit-demo default="JKANYK" vanillaJS="oLGWLk" }} 29 | -------------------------------------------------------------------------------- /modules/demos/parallax/parallax.js: -------------------------------------------------------------------------------- 1 | FlickityDocs.parallax = function( elem ) { 2 | 3 | let carousel = elem.querySelector('.carousel'); 4 | let flkty = new Flickity( carousel ); 5 | 6 | let cellRatio = 0.6; 7 | let bgRatio = 0.8; 8 | let fgRatio = 1.25; 9 | 10 | let background = elem.querySelector('.parallax__layer--bg'); 11 | let foreground = elem.querySelector('.parallax__layer--fg'); 12 | 13 | flkty.on( 'scroll', function( progress ) { 14 | moveParallaxLayer( background, bgRatio, progress ); 15 | moveParallaxLayer( foreground, fgRatio, progress ); 16 | } ); 17 | 18 | flkty.reposition(); 19 | 20 | function moveParallaxLayer( layer, layerRatio, progress ) { 21 | let decimal = 0.5 - ( 0.5 + progress * 4 ) * cellRatio * layerRatio; 22 | layer.style.left = decimal * 100 + '%'; 23 | } 24 | }; 25 | -------------------------------------------------------------------------------- /modules/demos/player/player.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 6 | 7 |
8 |
9 | 10 | 11 |
12 |
13 | 14 |

Playing

15 | 16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | {{> edit-demo default="xOXErG" vanillaJS="bZowzr" }} 25 | 26 |
27 |
28 | -------------------------------------------------------------------------------- /modules/demos/player/player.js: -------------------------------------------------------------------------------- 1 | FlickityDocs.player = function( elem ) { 2 | 3 | let carousel = elem.querySelector('.carousel'); 4 | let flkty = new Flickity( carousel, { 5 | autoPlay: 1000, 6 | } ); 7 | 8 | let statusElem = elem.querySelector('.player-status'); 9 | updateStatus(); 10 | 11 | elem.querySelector('.button--play').addEventListener( 'click', function() { 12 | flkty.playPlayer(); 13 | updateStatus(); 14 | } ); 15 | 16 | elem.querySelector('.button--stop').addEventListener( 'click', function() { 17 | flkty.stopPlayer(); 18 | updateStatus(); 19 | } ); 20 | 21 | elem.querySelector('.button--pause').addEventListener( 'click', function() { 22 | flkty.pausePlayer(); 23 | updateStatus(); 24 | } ); 25 | 26 | elem.querySelector('.button--unpause').addEventListener( 'click', function() { 27 | flkty.unpausePlayer(); 28 | updateStatus(); 29 | } ); 30 | 31 | function updateStatus() { 32 | statusElem.textContent = flkty.player.state; 33 | } 34 | 35 | }; 36 | 37 | -------------------------------------------------------------------------------- /modules/demos/prepend/prepend.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 |
7 | 1 8 |
9 |
10 | 2 11 |
12 |
13 | 3 14 |
15 |
16 | {{> edit-demo default="XJZpMN" vanillaJS="VYQPWx" }} 17 |
18 | -------------------------------------------------------------------------------- /modules/demos/prepend/prepend.js: -------------------------------------------------------------------------------- 1 | FlickityDocs.prepend = function( elem ) { 2 | 3 | let carousel = elem.querySelector('.carousel'); 4 | let flkty = new Flickity( carousel ); 5 | 6 | let cellNumber = flkty.cells.length + 1; 7 | let makeCellElem = FlickityDocs.makeCellElem; 8 | 9 | let button = elem.querySelector('.button'); 10 | button.addEventListener( 'click', function() { 11 | flkty.prepend([ makeCellElem( cellNumber++ ), makeCellElem( cellNumber++ ) ]); 12 | } ); 13 | 14 | }; 15 | -------------------------------------------------------------------------------- /modules/demos/prev-next-big-arrow/prev-next-big-arrow.css: -------------------------------------------------------------------------------- 1 | /* ---- carousel--prev-next-big-arrow ---- */ 2 | 3 | .carousel--prev-next-big-arrow .flickity-prev-next-button { 4 | background: transparent; 5 | } 6 | 7 | .carousel--prev-next-big-arrow .flickity-prev-next-button { 8 | width: 100px; 9 | height: 100px; 10 | } 11 | 12 | .carousel--prev-next-big-arrow .flickity-button-icon { 13 | fill: white; 14 | } 15 | 16 | .carousel--prev-next-big-arrow .flickity-button:disabled { 17 | display: none; 18 | } 19 | -------------------------------------------------------------------------------- /modules/demos/prev-next-big-arrow/prev-next-big-arrow.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | {{> edit-demo default="EaQxpb" }} 9 |
10 | -------------------------------------------------------------------------------- /modules/demos/prev-next-small-outside/prev-next-small-outside.css: -------------------------------------------------------------------------------- 1 | /* ---- carousel--prev-next-small-outside ---- */ 2 | 3 | .carousel--prev-next-small-outside { 4 | margin-left: 40px; 5 | margin-right: 40px; 6 | } 7 | 8 | .carousel--prev-next-small-outside .flickity-button { 9 | background: #333; 10 | } 11 | 12 | .carousel--prev-next-small-outside .flickity-prev-next-button { 13 | width: 30px; 14 | height: 30px; 15 | border-radius: 5px; 16 | } 17 | 18 | .carousel--prev-next-small-outside .flickity-button:hover { 19 | background: #F90; 20 | } 21 | 22 | .carousel--prev-next-small-outside .flickity-button-icon { 23 | fill: white; 24 | } 25 | 26 | .carousel--prev-next-small-outside .flickity-prev-next-button.previous { 27 | left: -40px; 28 | } 29 | .carousel--prev-next-small-outside .flickity-prev-next-button.next { 30 | right: -40px; 31 | } 32 | -------------------------------------------------------------------------------- /modules/demos/prev-next-small-outside/prev-next-small-outside.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | {{> edit-demo default="zxRYMP" }} 9 |
10 | -------------------------------------------------------------------------------- /modules/demos/previous/previous.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | {{> edit-demo default="emVpdz" vanillaJS="PwQPGX" }} 14 |
15 | -------------------------------------------------------------------------------- /modules/demos/previous/previous.js: -------------------------------------------------------------------------------- 1 | FlickityDocs.previous = function( elem ) { 2 | 3 | let carousel = elem.querySelector('.carousel'); 4 | let flkty = new Flickity( carousel ); 5 | 6 | let previousButton = elem.querySelector('.button--previous'); 7 | previousButton.addEventListener( 'click', function() { 8 | flkty.previous(); 9 | } ); 10 | 11 | let previousWrappedButton = elem.querySelector('.button--previous-wrapped'); 12 | previousWrappedButton.addEventListener( 'click', function() { 13 | flkty.previous( true ); 14 | } ); 15 | 16 | }; 17 | -------------------------------------------------------------------------------- /modules/demos/progress-bar/progress-bar.css: -------------------------------------------------------------------------------- 1 | /* progress-bar 2 | ------------------------- */ 3 | 4 | .carousel--progress-bar { 5 | margin-bottom: 0; 6 | } 7 | 8 | .carousel--progress-bar .flickity-page-dots { 9 | bottom: -40px; 10 | } 11 | 12 | .progress-bar__bar { 13 | height: 20px; 14 | width: 0; 15 | background: #333; 16 | margin-bottom: 30px; 17 | } 18 | -------------------------------------------------------------------------------- /modules/demos/progress-bar/progress-bar.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | {{> edit-demo default="grGWbo" vanillaJS="obpVGa" }} 11 |
12 | -------------------------------------------------------------------------------- /modules/demos/progress-bar/progress-bar.js: -------------------------------------------------------------------------------- 1 | FlickityDocs['progress-bar'] = function( elem ) { 2 | 3 | let carousel = elem.querySelector('.carousel'); 4 | let progressBar = elem.querySelector('.progress-bar__bar'); 5 | let flkty = new Flickity( carousel ); 6 | 7 | flkty.on( 'scroll', function( progress ) { 8 | progress = Math.max( 0, Math.min( 1, progress ) ); 9 | progressBar.style.width = progress * 100 + '%'; 10 | } ); 11 | 12 | flkty.reposition(); 13 | }; 14 | -------------------------------------------------------------------------------- /modules/demos/remove/remove.hbs: -------------------------------------------------------------------------------- 1 |
2 |

Click cells to remove

3 |
4 |
5 | 1 6 |
7 |
8 | 2 9 |
10 |
11 | 3 12 |
13 |
14 | 4 15 |
16 |
17 | 5 18 |
19 |
20 | 6 21 |
22 |
23 | 7 24 |
25 |
26 | 8 27 |
28 |
29 | {{> edit-demo default="WbMRgv" vanillaJS="gbvgdy" }} 30 |
31 | -------------------------------------------------------------------------------- /modules/demos/remove/remove.js: -------------------------------------------------------------------------------- 1 | FlickityDocs.remove = function( elem ) { 2 | 3 | let carousel = elem.querySelector('.carousel'); 4 | let flkty = new Flickity( carousel, { 5 | initialIndex: 1, 6 | } ); 7 | 8 | flkty.on( 'staticClick', function( event, pointer, cellElem ) { 9 | if ( cellElem ) { 10 | flkty.remove( cellElem ); 11 | } 12 | } ); 13 | 14 | }; 15 | -------------------------------------------------------------------------------- /modules/demos/reposition/reposition.css: -------------------------------------------------------------------------------- 1 | /* ---- reposition ---- */ 2 | 3 | .carousel--reposition .carousel-cell { 4 | position: relative; 5 | width: 33%; 6 | } 7 | 8 | .carousel--reposition .carousel-cell.is-expanded { 9 | width: 80%; 10 | } 11 | 12 | .carousel--reposition .carousel-cell .button { 13 | position: absolute; 14 | left: 10px; 15 | top: 10px; 16 | } 17 | -------------------------------------------------------------------------------- /modules/demos/reposition/reposition.hbs: -------------------------------------------------------------------------------- 1 |
2 |

Click cells to toggle size

3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | {{> edit-demo default="zxRvdw" vanillaJS="vEdgOR" }} 11 |
12 | -------------------------------------------------------------------------------- /modules/demos/reposition/reposition.js: -------------------------------------------------------------------------------- 1 | FlickityDocs.reposition = function( elem ) { 2 | 3 | let carousel = elem.querySelector('.carousel'); 4 | let flkty = new Flickity( carousel ); 5 | 6 | flkty.on( 'staticClick', function( event, pointer, cellElement ) { 7 | if ( !cellElement ) { 8 | return; 9 | } 10 | cellElement.classList.toggle('is-expanded'); 11 | flkty.reposition(); 12 | } ); 13 | 14 | }; 15 | -------------------------------------------------------------------------------- /modules/demos/resize-show/resize-show.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 | 12 | {{> edit-demo default="eNvdoo" vanillaJS="gpmLYG" }} 13 |
14 | -------------------------------------------------------------------------------- /modules/demos/resize-show/resize-show.js: -------------------------------------------------------------------------------- 1 | FlickityDocs['resize-show'] = function( elem ) { 2 | 3 | let carousel = elem.querySelector('.carousel'); 4 | let flkty = new Flickity( carousel ); 5 | let button = elem.querySelector('.button'); 6 | 7 | button.addEventListener( 'click', function() { 8 | carousel.style.display = 'block'; 9 | flkty.resize(); 10 | } ); 11 | 12 | }; 13 | -------------------------------------------------------------------------------- /modules/demos/resize/resize.css: -------------------------------------------------------------------------------- 1 | /* ---- resize ---- */ 2 | 3 | .carousel--resize { 4 | width: 50%; 5 | min-width: 240px; 6 | } 7 | 8 | .carousel--resize.is-expanded { 9 | width: 100%; 10 | } 11 | 12 | .carousel--resize.is-expanded .carousel-cell { 13 | height: 320px; 14 | } 15 | 16 | .carousel--resize.is-expanded .carousel-cell:before { 17 | line-height: 320px; 18 | } 19 | -------------------------------------------------------------------------------- /modules/demos/resize/resize.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | {{> edit-demo default="XJZmMp" vanillaJS="NPyGjQ" }} 13 |
14 | -------------------------------------------------------------------------------- /modules/demos/resize/resize.js: -------------------------------------------------------------------------------- 1 | FlickityDocs.resize = function( elem ) { 2 | 3 | let carousel = elem.querySelector('.carousel'); 4 | let flkty = new Flickity( carousel ); 5 | let button = elem.querySelector('.button'); 6 | 7 | button.addEventListener( 'click', function() { 8 | carousel.classList.toggle('is-expanded'); 9 | flkty.resize(); 10 | } ); 11 | 12 | }; 13 | -------------------------------------------------------------------------------- /modules/demos/select-cell-selector/select-cell-selector.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | {{> edit-demo default="rLGrpQ" vanillaJS="mEBAXR" }} 17 |
18 | -------------------------------------------------------------------------------- /modules/demos/select-cell-selector/select-cell-selector.js: -------------------------------------------------------------------------------- 1 | FlickityDocs['select-cell-selector'] = function( elem ) { 2 | 3 | let flkty = new Flickity( elem.querySelector('.carousel'), { 4 | groupCells: true, 5 | } ); 6 | 7 | let buttonGroup = elem.querySelector('.button-group'); 8 | 9 | filterBind( buttonGroup, 'click', '.button', function( event ) { 10 | let selector = event.target.getAttribute('data-selector'); 11 | flkty.selectCell( selector ); 12 | } ); 13 | 14 | }; 15 | -------------------------------------------------------------------------------- /modules/demos/select-cell/select-cell.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | {{> edit-demo default="KrXgyZ" vanillaJS="vKZXpK" }} 23 |
24 | -------------------------------------------------------------------------------- /modules/demos/select-cell/select-cell.js: -------------------------------------------------------------------------------- 1 | FlickityDocs['select-cell'] = function( elem ) { 2 | 3 | let utils = window.fizzyUIUtils; 4 | 5 | let flkty = new Flickity( elem.querySelector('.carousel'), { 6 | groupCells: true, 7 | } ); 8 | 9 | let buttonGroup = elem.querySelector('.button-group'); 10 | let buttons = utils.makeArray( buttonGroup.querySelectorAll('.button') ); 11 | 12 | filterBind( buttonGroup, 'click', '.button', function( event ) { 13 | let index = buttons.indexOf( event.target ); 14 | flkty.selectCell( index ); 15 | } ); 16 | 17 | }; 18 | -------------------------------------------------------------------------------- /modules/demos/select-instant/select-instant.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | {{> edit-demo default="pggQeL" vanillaJS="OMMamp" }} 17 |
18 | -------------------------------------------------------------------------------- /modules/demos/select-instant/select-instant.js: -------------------------------------------------------------------------------- 1 | FlickityDocs['select-instant'] = function( elem ) { 2 | 3 | let utils = window.fizzyUIUtils; 4 | 5 | let flkty = new Flickity( elem.querySelector('.carousel') ); 6 | 7 | let buttonGroup = elem.querySelector('.button-group'); 8 | let buttons = utils.makeArray( buttonGroup.querySelectorAll('.button') ); 9 | 10 | filterBind( buttonGroup, 'click', '.button', function( event ) { 11 | let index = buttons.indexOf( event.target ); 12 | flkty.select( index, false, true ); 13 | } ); 14 | 15 | }; 16 | -------------------------------------------------------------------------------- /modules/demos/select/select.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | {{> edit-demo default="yyvYeN" vanillaJS="ByYoKM" }} 17 |
18 | -------------------------------------------------------------------------------- /modules/demos/select/select.js: -------------------------------------------------------------------------------- 1 | FlickityDocs.select = function( elem ) { 2 | 3 | let utils = window.fizzyUIUtils; 4 | 5 | let flkty = new Flickity( elem.querySelector('.carousel') ); 6 | 7 | let buttonGroup = elem.querySelector('.button-group'); 8 | let buttons = utils.makeArray( buttonGroup.querySelectorAll('.button') ); 9 | 10 | filterBind( buttonGroup, 'click', '.button', function( event ) { 11 | let index = buttons.indexOf( event.target ); 12 | flkty.select( index ); 13 | } ); 14 | 15 | }; 16 | -------------------------------------------------------------------------------- /modules/demos/static-click/static-click.css: -------------------------------------------------------------------------------- 1 | /* ---- static-click ---- */ 2 | 3 | .carousel--static-click .carousel-cell { width: 26%; } 4 | 5 | .carousel--static-click .carousel-cell.is-clicked { background: #ED2; } 6 | -------------------------------------------------------------------------------- /modules/demos/static-click/static-click.hbs: -------------------------------------------------------------------------------- 1 |
2 |

Click cells

3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |

 

15 | {{> edit-demo default="XJZgzM" vanillaJS="RNQgxe" }} 16 |
17 | -------------------------------------------------------------------------------- /modules/demos/static-click/static-click.js: -------------------------------------------------------------------------------- 1 | FlickityDocs['static-click'] = function( elem ) { 2 | 3 | let carousel = elem.querySelector('.carousel'); 4 | let flkty = new Flickity( carousel, { 5 | initialIndex: 1, 6 | } ); 7 | let logger = elem.querySelector('.logger'); 8 | 9 | flkty.on( 'staticClick', function( event, pointer, cellElement, cellIndex ) { 10 | if ( !cellElement ) { 11 | return; 12 | } 13 | 14 | let prevClickedCell = carousel.querySelector('.is-clicked'); 15 | if ( prevClickedCell ) { 16 | prevClickedCell.classList.remove('is-clicked'); 17 | } 18 | cellElement.classList.add('is-clicked'); 19 | 20 | logger.textContent = 'Cell ' + ( cellIndex + 1 ) + ' clicked'; 21 | } ); 22 | 23 | }; 24 | -------------------------------------------------------------------------------- /modules/demos/watch-css/watch-css.css: -------------------------------------------------------------------------------- 1 | /* ---- watch-css ---- */ 2 | 3 | .carousel--watch-css:after { 4 | content: 'flickity'; 5 | display: none; 6 | } 7 | 8 | 9 | @media screen and ( min-width: 768px ) { 10 | 11 | .carousel--watch-css:after { 12 | content: ''; 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /modules/demos/watch-css/watch-css.hbs: -------------------------------------------------------------------------------- 1 |

watchCSS

2 | 3 |

You can enable and disable Flickity with CSS. watchCSS option watches the content of :after of the carousel element. Flickity is enabled if :after content is 'flickity'.

4 | 5 |
6 |
7 | ``` js 8 | watchCSS: true 9 | // enable Flickity in CSS when 10 | // element:after { content: 'flickity' } 11 | ``` 12 | 13 | ``` css 14 | /* enable Flickity by default */ 15 | .carousel:after { 16 | content: 'flickity'; 17 | display: none; /* hide :after */ 18 | } 19 | 20 | @media screen and ( min-width: 768px ) { 21 | /* disable Flickity for large devices */ 22 | .carousel:after { 23 | content: ''; 24 | } 25 | } 26 | ``` 27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | {{> edit-demo default="NPyWbQ" }} 35 |
36 |
37 | -------------------------------------------------------------------------------- /modules/demos/wrap-around/wrap-around.hbs: -------------------------------------------------------------------------------- 1 |

wrapAround

2 | 3 |

At the end of cells, wrap-around to the other end for infinite scrolling.

4 | 5 |
6 |
7 | ``` js 8 | wrapAround: true 9 | ``` 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | {{> edit-demo default="myXdej" }} 20 |
21 |
22 | -------------------------------------------------------------------------------- /modules/example/example.css: -------------------------------------------------------------------------------- 1 | /* example 2 | ------------------------- */ 3 | 4 | /* ---- 100% width & height ---- */ 5 | 6 | /* set arbitrary height */ 7 | .example__demo--full-bleed { 8 | height: 300px; 9 | margin-bottom: 50px; 10 | } 11 | -------------------------------------------------------------------------------- /modules/fizzy-docs-modules-overwrites/button.css: -------------------------------------------------------------------------------- 1 | /* button overwrites 2 | ------------------------- */ 3 | 4 | .button-group--inline { 5 | display: inline-block; 6 | vertical-align: bottom; 7 | } 8 | -------------------------------------------------------------------------------- /modules/fizzy-docs-modules-overwrites/buy-button.css: -------------------------------------------------------------------------------- 1 | /* buy button overwrites 2 | ------------------------- */ 3 | 4 | .buy-button { 5 | border: 2px solid; 6 | color: #8C8; 7 | } 8 | 9 | .buy-button__price { 10 | background: #8C8; 11 | border-radius: 0; 12 | } 13 | 14 | .buy-button:hover .buy-button__price { background: #E90; } 15 | 16 | .buy-button-trio .buy-button__price { 17 | border-radius: 0; 18 | } 19 | -------------------------------------------------------------------------------- /modules/fizzy-docs-modules-overwrites/chunky-button.css: -------------------------------------------------------------------------------- 1 | /* chunky-button overwrites 2 | ------------------------- */ 3 | 4 | .chunky-button--fill { 5 | background-color: #6C6; 6 | color: white; 7 | } 8 | 9 | .chunky-button--fill svg path { 10 | fill: white; 11 | } 12 | 13 | .chunky-button--fill:hover { 14 | background-color: #EC5; 15 | color: white; 16 | } 17 | 18 | .chunky-button--outline svg path { 19 | fill: #6A6; 20 | } 21 | 22 | .chunky-button--outline:hover svg path { 23 | fill: #E90; 24 | } 25 | -------------------------------------------------------------------------------- /modules/fizzy-docs-modules-overwrites/site-footer.css: -------------------------------------------------------------------------------- 1 | /* fizzy-docs-modules-overwrites 2 | ------------------------- */ 3 | 4 | /* ---- site-footer ---- */ 5 | 6 | .site-footer { 7 | background: #FAFAFA; 8 | margin-top: 0; 9 | position: relative; 10 | } 11 | 12 | .site-footer .twitter-logo { fill: #8C8; } 13 | .site-footer a:hover .twitter-logo { fill: #E90; } 14 | 15 | 16 | /* ---- showcase-item ---- */ 17 | 18 | .showcase-item__link { 19 | background: #EEE; 20 | } 21 | 22 | .showcase-item__link:hover { 23 | background: #8C8; 24 | color: white; 25 | } 26 | 27 | /* ---- fizzy-bear-shirt ---- */ 28 | 29 | .fizzy-bear-shirt__link { 30 | display: block; 31 | padding: 10px; 32 | border-radius: 8px; 33 | background: #eee; 34 | } 35 | 36 | .fizzy-bear-shirt__title { 37 | margin-top: 0; 38 | } 39 | 40 | .fizzy-bear-shirt__image { 41 | border-radius: 5px; 42 | } 43 | 44 | .fizzy-bear-shirt__link:hover { 45 | background: #8C8; 46 | color: white; 47 | } 48 | 49 | /* ---- mfzy-logo ---- */ 50 | 51 | .site-footer .mfzy-logo__body-fill { fill: #6A6; } 52 | .site-footer .mfzy-logo__stripes { display: none; } 53 | 54 | .site-footer a:hover .mfzy-logo__stripes { display: inline; } 55 | 56 | /* ---- mfzy-wordmark ---- */ 57 | 58 | .mfzy-wordmark { stroke: #6A6; } 59 | .mfzy-brand__link:hover .mfzy-wordmark { stroke: #333; } 60 | 61 | @media screen and ( min-width: 1220px ) { 62 | 63 | .site-footer .mfzy-brand { 64 | position: absolute; 65 | left: 1000px; 66 | top: 70px; 67 | width: 180px; 68 | } 69 | 70 | .site-footer .mfzy-logo { 71 | display: block; 72 | width: 108px; 73 | height: 108px; 74 | margin: 0 auto 5px; 75 | } 76 | 77 | .site-footer .mfzy-wordmark { 78 | display: block; 79 | margin: 0 auto; 80 | } 81 | 82 | } 83 | -------------------------------------------------------------------------------- /modules/hero-carousel/hero-carousel.css: -------------------------------------------------------------------------------- 1 | /* hero-carousel 2 | ------------------------- */ 3 | 4 | .hero-carousel { 5 | margin-bottom: 80px; 6 | background: #FAFAFA url('https://i.imgur.com/R60qKwS.jpg'); 7 | background-size: cover; 8 | } 9 | 10 | .hero-carousel__cell { 11 | width: 100%; 12 | height: 240px; 13 | color: white; 14 | background: #ED2; 15 | background: #EFCE36; /* match gif */ 16 | } 17 | 18 | .hero-carousel__cell__content { 19 | padding: 20px 60px 0; 20 | max-width: 1000px; 21 | margin: 0 auto; 22 | position: relative; 23 | } 24 | 25 | .hero-carousel h1 { 26 | font-size: 3.2rem; 27 | line-height: 1.0; 28 | margin: 0; 29 | padding-top: 40px; 30 | } 31 | 32 | .hero-carousel .tagline { 33 | font-size: 1.4rem; 34 | line-height: 1.0; 35 | margin: 0 0 0.5rem; 36 | color: #444; 37 | } 38 | 39 | .hero-illustration { 40 | display: block; 41 | width: 100%; 42 | max-width: 200px; 43 | margin: 0 auto; 44 | } 45 | 46 | .hero-carousel__cell--2 { 47 | background: #8C8; 48 | } 49 | 50 | .slogan { 51 | line-height: 1.2; 52 | margin: 0; 53 | } 54 | 55 | .slogan--easy, 56 | .slogan--fun { 57 | font-size: 2.2rem; 58 | line-height: 1.1; 59 | } 60 | 61 | .slogan--tagline { 62 | margin-top: 10px; 63 | font-size: 1.2rem; 64 | color: #444; 65 | } 66 | 67 | .feature-list { 68 | font-size: 1.8rem; 69 | list-style: none; 70 | line-height: 1.2; 71 | margin: 0; 72 | padding: 0; 73 | } 74 | 75 | .feature-list li { 76 | margin-bottom: 10px; 77 | } 78 | 79 | .hero-carousel__cell--3 { 80 | background: #E90; 81 | } 82 | 83 | .hero-carousel__cell--4 { 84 | background: #E5A; 85 | } 86 | 87 | .by-line { 88 | line-height: 1.2; 89 | margin: 0; 90 | font-size: 1.8rem; 91 | } 92 | 93 | .by-line--made { 94 | padding-top: 20px; 95 | margin-bottom: 10px; 96 | color: #444; 97 | } 98 | 99 | @media screen and ( max-width: 500px ) { 100 | /* hide first cell content on small devices */ 101 | .hero-carousel h1, 102 | .hero-carousel .tagline, 103 | .hero-carousel .gh-button { 104 | display: none; 105 | } 106 | 107 | } 108 | 109 | @media screen and ( min-width: 500px ) { 110 | .hero-carousel__cell--1 .hero-carousel__cell__content { 111 | padding-right: 260px; 112 | } 113 | 114 | .hero-illustration { 115 | position: absolute; 116 | right: 60px; 117 | top: 20px; 118 | } 119 | } 120 | 121 | /* ---- large device styles ---- */ 122 | 123 | @media screen and ( min-width: 768px ) { 124 | 125 | .hero-carousel__cell { 126 | height: 440px; 127 | } 128 | 129 | .hero-carousel__cell__content { 130 | padding-top: 40px; 131 | } 132 | 133 | .hero-carousel h1 { 134 | font-size: 5.8rem; 135 | } 136 | 137 | .hero-carousel .tagline { 138 | font-size: 2.1rem; 139 | } 140 | 141 | .hero-illustration { 142 | top: 80px; 143 | } 144 | 145 | .slogan--easy, 146 | .slogan--fun { 147 | font-size: 4.8rem; 148 | } 149 | 150 | .slogan--tagline { 151 | margin-top: 20px; 152 | font-size: 2.4rem; 153 | } 154 | 155 | .feature-list { 156 | font-size: 3.1rem; 157 | } 158 | 159 | .feature-list li { 160 | margin-bottom: 20px; 161 | } 162 | 163 | .by-line { 164 | font-size: 3.1rem; 165 | } 166 | 167 | .by-line--made { 168 | padding-top: 40px; 169 | margin-bottom: 20px; 170 | } 171 | 172 | } 173 | 174 | @media screen and ( min-width: 960px ) { 175 | 176 | .hero-carousel__cell--1 .hero-carousel__cell__content { 177 | padding-right: 400px; 178 | } 179 | 180 | .hero-carousel h1 { 181 | font-size: 7.8rem; 182 | } 183 | 184 | .hero-carousel .tagline { 185 | margin-bottom: 1.0rem; 186 | } 187 | 188 | .hero-illustration { 189 | max-width: 400px; 190 | top: 20px 191 | } 192 | 193 | } 194 | -------------------------------------------------------------------------------- /modules/hero-carousel/hero-carousel.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Flickity

5 |

Touch, responsive, flickable carousels

6 |
7 | {{>gh-button project="Flickity" ghPath="metafizzy/flickity" stars="4,400" }} 8 |
9 | {{#unless isExport}} 10 | Flickity illustration 11 | {{/unless}} 12 |
13 |
14 |
15 |
16 |

Easy to use.

17 |

Fun to flick.

18 |

Flickity makes carousels, galleries, & sliders that feel lively and effortless.

19 |
20 |
21 |
22 |
23 |
    24 |
  • Physics-based animation
    • 25 |
  • Touch enable
    • 26 |
  • Responsive styling
    • 27 |
  • Full-feature API
    • 28 |
29 |
30 |
31 |
32 |
33 |

Made by Metafizzy.

34 |

You make the things that matter.

35 |

We make the widgets.

36 |
37 |
38 |
39 | -------------------------------------------------------------------------------- /modules/hero-carousel/hero-carousel.js: -------------------------------------------------------------------------------- 1 | FlickityDocs['hero-carousel'] = function( elem ) { 2 | 3 | let firstCell = elem.querySelector('.hero-carousel__cell--1'); 4 | let illoImg = firstCell.querySelector('.hero-illustration'); 5 | 6 | if ( illoImg ) { 7 | // switch out PNG for GIF 8 | let proxyGif = document.createElement('img'); 9 | proxyGif.onload = function() { 10 | illoImg.src = proxyGif.src; 11 | }; 12 | proxyGif.src = 'img/flickity-illustration.gif'; 13 | } 14 | 15 | }; 16 | -------------------------------------------------------------------------------- /modules/in-use-carousel/in-use-carousel.css: -------------------------------------------------------------------------------- 1 | /* in-use-carousel 2 | ------------------------- */ 3 | 4 | .in-use-carousel { 5 | } 6 | 7 | .in-use-carousel__item { 8 | width: 400px; 9 | height: 450px; 10 | display: block; 11 | position: relative; 12 | margin-right: 40px; 13 | border-radius: 5px; 14 | } 15 | 16 | .in-use-carousel__item__title { 17 | position: absolute; 18 | bottom: 0px; 19 | text-align: center; 20 | width: 100%; 21 | margin: 0; 22 | line-height: 50px; 23 | } 24 | 25 | .in-use-carousel__item__image { 26 | display: block; 27 | max-width: 100%; 28 | border-radius: 5px; 29 | transition: opacity 0.4s; 30 | opacity: 0; 31 | } 32 | 33 | /* fade in image when loaded */ 34 | .in-use-carousel__item__image.flickity-lazyloaded, 35 | .in-use-carousel__item__image.flickity-lazyerror { 36 | opacity: 1; 37 | } 38 | -------------------------------------------------------------------------------- /modules/in-use-carousel/in-use-carousel.hbs: -------------------------------------------------------------------------------- 1 |
3 | {{#each in_use}} 4 | 5 |

{{title}}

6 | {{title}} 7 | 8 | {{/each}} 9 |
10 | -------------------------------------------------------------------------------- /modules/page-nav/page-nav.css: -------------------------------------------------------------------------------- 1 | /* page-nav 2 | ------------------------- */ 3 | 4 | .page-nav { 5 | list-style: none; 6 | margin: 0 0 40px; 7 | padding: 0 10px 0 0; 8 | font-size: 0.85rem; 9 | line-height: 1.2; 10 | } 11 | 12 | .page-nav li { 13 | margin: 0.2rem 0; 14 | } 15 | 16 | .page-nav__item--h3, 17 | .page-nav__item--h4 { 18 | padding-left: 15px; 19 | } 20 | 21 | @media screen and ( min-width: 1220px ) { 22 | .page-nav { 23 | position: absolute; 24 | right: 0px; 25 | top: 0px; 26 | width: 200px; 27 | padding-top: 20px; 28 | } 29 | 30 | /* activate sticky */ 31 | .page-nav:after { 32 | content: 'sticky'; 33 | display: none; 34 | } 35 | 36 | .page-nav.is-fixed { 37 | position: fixed; 38 | } 39 | 40 | } 41 | -------------------------------------------------------------------------------- /modules/page-nav/page-nav.js: -------------------------------------------------------------------------------- 1 | /* globals Stickeroo */ 2 | FlickityDocs['page-nav'] = function( elem ) { 3 | 4 | new Stickeroo( elem ); 5 | }; 6 | -------------------------------------------------------------------------------- /modules/page-nav/stickeroo.js: -------------------------------------------------------------------------------- 1 | ( function( window ) { 2 | 3 | // -------------------------- Stickeroo -------------------------- // 4 | 5 | // sticky elements, like the page nav 6 | function Stickeroo( element ) { 7 | if ( !element ) { 8 | return; 9 | } 10 | this.element = element; 11 | this.isActive = false; 12 | this.isFixed = false; 13 | window.addEventListener( 'resize', this ); 14 | this.onresize(); 15 | } 16 | 17 | Stickeroo.prototype.handleEvent = utils.handleEvent; 18 | 19 | Stickeroo.prototype.onresize = function() { 20 | let afterContent = getComputedStyle( this.element, ':after' ).content; 21 | let size = getSize( this.element ); 22 | // activate if :after { content: 'sticky' } and fits in window 23 | if ( afterContent.indexOf('sticky') !== -1 && size.innerHeight <= window.innerHeight ) { 24 | this.activate(); 25 | } else { 26 | this.deactivate(); 27 | } 28 | }; 29 | 30 | utils.debounceMethod( Stickeroo, 'onresize' ); 31 | 32 | Stickeroo.prototype.activate = function() { 33 | // do not re-activate 34 | if ( this.isActive ) { 35 | return; 36 | } 37 | this.isActive = true; 38 | this.originalY = this.element.getBoundingClientRect().top + window.pageYOffset; 39 | window.addEventListener( 'scroll', this ); 40 | this.onscroll(); 41 | }; 42 | 43 | Stickeroo.prototype.deactivate = function() { 44 | // do not re-activate 45 | if ( !this.isActive ) { 46 | return; 47 | } 48 | this.isActive = false; 49 | this.isFixed = false; 50 | this.element.classList.remove('is-fixed'); 51 | window.removeEventListener( 'scroll', this ); 52 | }; 53 | 54 | function throttleProto( _class, methodName, threshold ) { 55 | // original method 56 | let method = _class.prototype[ methodName ]; 57 | let timeoutName = methodName + 'Timeout'; 58 | 59 | _class.prototype[ methodName ] = function() { 60 | if ( this[ timeoutName ] ) { 61 | return; 62 | } 63 | 64 | method.apply( this, arguments ); 65 | let _this = this; 66 | this[ timeoutName ] = setTimeout( function() { 67 | method.apply( _this, arguments ); 68 | delete _this[ timeoutName ]; 69 | }, threshold || 100 ); 70 | }; 71 | } 72 | 73 | Stickeroo.prototype.onscroll = function() { 74 | let isFixed = window.pageYOffset >= this.originalY; 75 | if ( isFixed === this.isFixed ) return; 76 | 77 | this.element.classList.toggle('is-fixed'); 78 | this.isFixed = isFixed; 79 | }; 80 | 81 | throttleProto( Stickeroo, 'onscroll', 50 ); 82 | 83 | window.Stickeroo = Stickeroo; 84 | 85 | } )( window ); 86 | -------------------------------------------------------------------------------- /modules/site-nav/site-nav.css: -------------------------------------------------------------------------------- 1 | /* site nav 2 | ------------------------- */ 3 | 4 | .site-nav { 5 | background: #8C8; 6 | } 7 | 8 | /* bottom nav */ 9 | .main ~ .site-nav { 10 | position: relative; 11 | margin-top: 80px; 12 | z-index: 2; /* on top of page-nav */ 13 | } 14 | 15 | .site-nav__list { 16 | list-style: none; 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | .site-nav__list:after { 22 | content: ''; 23 | clear: both; 24 | display: block; 25 | } 26 | 27 | .site-nav__item { 28 | width: 33.333%; 29 | float: left; 30 | line-height: 28px; 31 | } 32 | 33 | .site-nav__item a { 34 | display: block; 35 | color: white; 36 | padding: 5px 37 | } 38 | 39 | .site-nav__item--homepage { 40 | font-size: 21px; 41 | font-weight: bold; 42 | } 43 | 44 | .site-nav__item--homepage a { 45 | } 46 | 47 | .site-nav__item a:hover { 48 | background: #E5A; 49 | color: white; 50 | } 51 | 52 | .site-nav__item a:active { 53 | background: white; 54 | color: #8C8; 55 | } 56 | 57 | /* selected */ 58 | .page--style .site-nav__item--style a, 59 | .page--options .site-nav__item--options a, 60 | .page--api .site-nav__item--api a, 61 | .page--events .site-nav__item--events a, 62 | .page--extras .site-nav__item--extras a, 63 | .page--license .site-nav__item--license a { 64 | background: #ED2; 65 | color: white; 66 | } 67 | 68 | /* size at which it can fit */ 69 | @media screen and ( min-width: 768px ) { 70 | 71 | .site-nav__item { 72 | width: auto; 73 | font-size: 21px; 74 | line-height: 70px; 75 | } 76 | 77 | .site-nav__item a { 78 | padding: 0px 25px; 79 | } 80 | 81 | .site-nav__item--homepage { 82 | font-size: 26px; 83 | } 84 | 85 | } 86 | -------------------------------------------------------------------------------- /modules/site-nav/site-nav.hbs: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flickity-docs", 3 | "version": "3.0.0", 4 | "description": "Documentation for Flickity", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "npm run lint", 8 | "lint": "npx eslint .", 9 | "dev": "npx gulp dev", 10 | "build": "npm run lint && npm run buildExport && npx gulp", 11 | "zip": "rm -rf build/flickity-docs.zip && cp -r build docs && zip -rq build/flickity-docs.zip docs/ && rm -rf docs", 12 | "buildExport": "rm -rf build/ && npx gulp export && npm run zip", 13 | "deploy": "netlify deploy --dir=build", 14 | "deployProd": "netlify deploy --dir=build --prod" 15 | }, 16 | "dependencies": { 17 | "cheerio": "^1.0.0-rc.10", 18 | "glob": "^7.2.0", 19 | "gulp": "^4.0.2", 20 | "gulp-concat": "^2.6.1", 21 | "gulp-filter": "^7.0.0", 22 | "gulp-front-matter": "^1.3.0", 23 | "gulp-hb": "^8.0.0", 24 | "gulp-rename": "^2.0.0", 25 | "gulp-uglify": "^3.0.2", 26 | "highlight.js": "^11.5.0", 27 | "transfob": "^1.0.0" 28 | }, 29 | "devDependencies": { 30 | "eslint": "^8.12.0", 31 | "eslint-plugin-metafizzy": "^2.0.1" 32 | }, 33 | "keywords": [ 34 | "flickity", 35 | "docs" 36 | ], 37 | "author": "Metafizzy", 38 | "private": true, 39 | "license": "UNLICENSED", 40 | "repository": { 41 | "type": "git", 42 | "url": "git://github.com/metafizzy/flickity-docs.git" 43 | }, 44 | "bugs": { 45 | "url": "https://github.com/metafizzy/flickity-docs/issues" 46 | }, 47 | "homepage": "https://flickity.metafizzy.co" 48 | } 49 | -------------------------------------------------------------------------------- /tasks/assets.js: -------------------------------------------------------------------------------- 1 | let gulp = require('gulp'); 2 | 3 | gulp.task( 'fonts', function() { 4 | return gulp.src( 'fonts/*.*', { base: '.' } ) 5 | .pipe( gulp.dest('build') ); 6 | } ); 7 | 8 | gulp.task( 'assets', function() { 9 | return gulp.src('assets/**/*') 10 | .pipe( gulp.dest('build') ); 11 | } ); 12 | 13 | // copy prod assets 14 | gulp.task( 'prod-assets', gulp.parallel( 'fonts', 'assets' ) ); 15 | 16 | module.exports = function() {}; 17 | -------------------------------------------------------------------------------- /tasks/content.js: -------------------------------------------------------------------------------- 1 | let gulp = require('gulp'); 2 | let rename = require('gulp-rename'); 3 | let filter = require('gulp-filter'); 4 | let frontMatter = require('gulp-front-matter'); 5 | let path = require('path'); 6 | let transfob = require('transfob'); 7 | let pageNav = require('./utils/page-nav'); 8 | let highlightCodeBlock = require('./utils/highlight-code-block'); 9 | let hb = require('gulp-hb'); 10 | 11 | // sources 12 | let contentSrc = 'content/**/*.hbs'; 13 | let partialsSrc = [ 14 | 'bower_components/fizzy-docs-modules/*/*.hbs', 15 | 'modules/*/**/*.hbs', 16 | ]; 17 | let dataSrc = 'data/*.json'; 18 | let pageTemplateSrc = 'templates/*.hbs'; 19 | let contentSrcs = [ contentSrc, pageTemplateSrc, dataSrc ] 20 | .concat( partialsSrc ); 21 | 22 | // ----- page template ----- // 23 | 24 | let helpers = { 25 | lowercase: function( str ) { 26 | return str.toLowerCase(); 27 | }, 28 | firstValue: function( ary ) { 29 | return ary[0]; 30 | }, 31 | plusOne: function( str ) { 32 | return parseInt( str, 10 ) + 1; 33 | }, 34 | slug: function( str ) { 35 | return str.replace( /[^\w\d]+/gi, '-' ).toLowerCase(); 36 | }, 37 | }; 38 | 39 | module.exports = function( site ) { 40 | 41 | let pageTemplate; 42 | 43 | gulp.task( 'getPageTemplate', function() { 44 | return gulp.src('templates/page.hbs') 45 | .pipe( transfob( function( file, enc, next ) { 46 | pageTemplate = file.contents.toString(); 47 | next( null, file ); 48 | } ) ); 49 | } ); 50 | 51 | gulp.task( 'buildPages', function() { 52 | // exclude 404 if export 53 | let filterQuery = site.data.isExport ? [ '**', '!**/404.*' ] : '**'; 54 | 55 | site.data.sourceUrlPath = site.data.isExport ? '' : 56 | 'https://unpkg.com/flickity@2/dist/'; 57 | 58 | return gulp.src( contentSrc ) 59 | .pipe( filter( filterQuery ) ) 60 | .pipe( frontMatter({ 61 | property: 'data.page', 62 | remove: true, 63 | }) ) 64 | .pipe( transfob( function( file, enc, next ) { 65 | // add file path data 66 | file.rootPath = path.relative( file.path, file.cwd + '/content/' ) 67 | .replace( /\.\.$/, '' ); 68 | file.namebase = path.basename( file.path, '.hbs' ); 69 | // wrap contents in page template 70 | let contents = file.contents.toString(); 71 | let templateParts = pageTemplate.split('{{{main}}}'); 72 | contents = templateParts[0] + contents + templateParts[1]; 73 | file.contents = Buffer.from( contents ); 74 | 75 | next( null, file ); 76 | } ) ) 77 | .pipe( hb() 78 | .partials( pageTemplateSrc ) 79 | .partials( partialsSrc, { 80 | parsePartialName: function( options, file ) { 81 | return path.basename( file.path, '.hbs' ); 82 | }, 83 | } ) 84 | .data( dataSrc ) 85 | .data( site.data ) 86 | .helpers( helpers ) ) 87 | .pipe( highlightCodeBlock() ) 88 | .pipe( pageNav() ) 89 | .pipe( rename({ extname: '.html' }) ) 90 | .pipe( gulp.dest('build') ); 91 | } ); 92 | 93 | let content = gulp.series( 'getPageTemplate', 'buildPages' ); 94 | 95 | gulp.task( 'content', content ); 96 | 97 | if ( site.data.isDev ) { 98 | console.log( contentSrcs.join(',') ); 99 | gulp.watch( contentSrcs, content ); 100 | } 101 | 102 | }; 103 | -------------------------------------------------------------------------------- /tasks/css.js: -------------------------------------------------------------------------------- 1 | let gulp = require('gulp'); 2 | let concat = require('gulp-concat'); 3 | let getGlobPaths = require('./utils/get-glob-paths'); 4 | 5 | let cssSrc = [ 6 | // dependencies 7 | 'bower_components/normalize.css/normalize.css', 8 | // flickity 9 | 'bower_components/flickity/css/flickity.css', 10 | // flickity add-ons 11 | 'bower_components/flickity-fullscreen/fullscreen.css', 12 | 'bower_components/flickity-fade/flickity-fade.css', 13 | // fizzy docs modules 14 | 'bower_components/fizzy-docs-modules/*/*.css', 15 | // base 16 | 'css/*.css', 17 | // modules 18 | 'modules/*/*.css', 19 | // demos & submodules 20 | 'modules/*/*/**/*.css', 21 | ]; 22 | 23 | gulp.task( 'css', function() { 24 | return gulp.src( cssSrc ) 25 | .pipe( concat('flickity-docs.css') ) 26 | .pipe( gulp.dest('build/css') ); 27 | } ); 28 | 29 | module.exports = function( site ) { 30 | site.data.cssPaths = getGlobPaths( cssSrc ); 31 | }; 32 | -------------------------------------------------------------------------------- /tasks/dist.js: -------------------------------------------------------------------------------- 1 | let gulp = require('gulp'); 2 | 3 | // copy packery dist to build/ 4 | gulp.task( 'dist', function() { 5 | return gulp.src('bower_components/flickity/dist/*.*') 6 | .pipe( gulp.dest('build') ); 7 | } ); 8 | 9 | module.exports = function() {}; 10 | -------------------------------------------------------------------------------- /tasks/js.js: -------------------------------------------------------------------------------- 1 | let gulp = require('gulp'); 2 | let concat = require('gulp-concat'); 3 | let uglify = require('gulp-uglify'); 4 | let getGlobPaths = require('./utils/get-glob-paths'); 5 | 6 | let jsSrc = [ 7 | // dependencies 8 | 'bower_components/get-size/get-size.js', 9 | 'bower_components/desandro-matches-selector/matches-selector.js', 10 | 'bower_components/ev-emitter/ev-emitter.js', 11 | 'bower_components/fizzy-ui-utils/utils.js', 12 | 'bower_components/unipointer/unipointer.js', 13 | 'bower_components/unidragger/unidragger.js', 14 | // flickity 15 | 'bower_components/flickity/js/cell.js', 16 | 'bower_components/flickity/js/slide.js', 17 | 'bower_components/flickity/js/animate.js', 18 | 'bower_components/flickity/js/flickity.js', 19 | 'bower_components/flickity/js/drag.js', 20 | 'bower_components/flickity/js/prev-next-button.js', 21 | 'bower_components/flickity/js/page-dots.js', 22 | 'bower_components/flickity/js/player.js', 23 | 'bower_components/flickity/js/add-remove-cell.js', 24 | 'bower_components/flickity/js/lazyload.js', 25 | // flickity add-ons 26 | 'bower_components/imagesloaded/imagesloaded.js', 27 | 'bower_components/flickity-imagesloaded/flickity-imagesloaded.js', 28 | 'bower_components/flickity-as-nav-for/as-nav-for.js', 29 | 'bower_components/flickity-bg-lazyload/bg-lazyload.js', 30 | 'bower_components/flickity-fullscreen/fullscreen.js', 31 | 'bower_components/flickity-hash/hash.js', 32 | 'bower_components/flickity-fade/flickity-fade.js', 33 | // draggabilly 34 | 'bower_components/draggabilly/draggabilly.js', 35 | // fizzy docs modules 36 | 'bower_components/fizzy-docs-modules/*/*.js', 37 | // docs 38 | 'js/boilerplate.js', 39 | // modules 40 | 'modules/**/*.js', 41 | // init 42 | 'js/init.js', 43 | ]; 44 | 45 | // concat & minify js 46 | gulp.task( 'js', function() { 47 | return gulp.src( jsSrc ) 48 | .pipe( uglify() ) 49 | .pipe( concat('flickity-docs.min.js') ) 50 | .pipe( gulp.dest('build/js') ); 51 | } ); 52 | 53 | module.exports = function( site ) { 54 | site.data.jsPaths = getGlobPaths( jsSrc ); 55 | }; 56 | -------------------------------------------------------------------------------- /tasks/utils/get-glob-paths.js: -------------------------------------------------------------------------------- 1 | let glob = require('glob'); 2 | 3 | /** 4 | * takes glob src and returns expanded paths 5 | * @param {Array} src 6 | * @returns {Array} paths 7 | */ 8 | module.exports = function getGlobPaths( src ) { 9 | let paths = []; 10 | // expand paths 11 | src.forEach( function( path ) { 12 | if ( glob.hasMagic( path ) ) { 13 | let files = glob.sync( path ); 14 | paths = paths.concat( files ); 15 | } else { 16 | paths.push( path ); 17 | } 18 | } ); 19 | 20 | return paths; 21 | }; 22 | -------------------------------------------------------------------------------- /tasks/utils/highlight-code-block.js: -------------------------------------------------------------------------------- 1 | let highlightjs = require('highlight.js'); 2 | let transfob = require('transfob'); 3 | 4 | highlightjs.configure({ 5 | classPrefix: '', 6 | }); 7 | 8 | let hljsJavascript = highlightjs.getLanguage('javascript'); 9 | // highlight Flickity & flkty 10 | /* eslint-disable camelcase */ 11 | hljsJavascript.keywords.flickity_keyword = 'Flickity'; 12 | hljsJavascript.keywords.flickity_var = 'flkty'; 13 | /* eslint-enable camelcase */ 14 | 15 | hljsJavascript.contains.push({ 16 | className: 'jquery_var', 17 | begin: /\$grid/, 18 | }); 19 | 20 | let reFirstLine = /.*\n/; 21 | 22 | function replaceCodeBlock( match, leadingWhiteSpace, block ) { 23 | let langMatch = block.match( reFirstLine ); 24 | let language = langMatch && langMatch[0] || ''; 25 | // remove leading whitespace from code block 26 | if ( leadingWhiteSpace && leadingWhiteSpace.length ) { 27 | let reLeadingWhiteSpace = new RegExp( '^' + leadingWhiteSpace, 'gim' ); 28 | block = block.replace( reLeadingWhiteSpace, '' ); 29 | } 30 | // remove first line 31 | block = block.replace( reFirstLine, '' ); 32 | 33 | // highlight code 34 | let highlighted = block; 35 | if ( language ) { 36 | highlighted = highlightjs.highlight( block, { 37 | language: language.trim(), 38 | illegal: false, 39 | } ).value; 40 | } 41 | // wrap in 

42 |   let html = `
${highlighted}
`;
43 |   return html;
44 | }
45 | 
46 | module.exports = function() {
47 |   return transfob( function( file, enc, next ) {
48 |     let contents = file.contents.toString();
49 |     contents = contents.replace( /\n( *)```([^```]+)```/gi, replaceCodeBlock );
50 |     file.contents = Buffer.from( contents );
51 |     next( null, file );
52 |   } );
53 | };
54 | 


--------------------------------------------------------------------------------
/tasks/utils/page-nav.js:
--------------------------------------------------------------------------------
 1 | let cheerio = require('cheerio');
 2 | let transfob = require('transfob');
 3 | 
 4 | module.exports = function pageNav() {
 5 |   return transfob( function( file, enc, next ) {
 6 |     /* eslint-disable-next-line id-length */
 7 |     let $ = cheerio.load( file.contents.toString(), {
 8 |       recognizeSelfClosing: true, // for inline SVG
 9 |     } );
10 |     let pageNavHtml = '\n';
11 |     // query each h2, h3, h4
12 |     $('.main h2, .main h3, .main h4').each( function( i, header ) {
13 |       let $header = $( header );
14 |       // replace non alphanumeric to hyphens
15 |       let title = $header.text();
16 |       let slug = title.replace( /[^\w\d]+/gi, '-' )
17 |         // trim trailing hyphens
18 |         .replace( /^-+/, '' )
19 |         .replace( /-+$/, '' )
20 |         .toLowerCase();
21 |       // set id slug
22 |       $header.attr( 'id', slug );
23 |       // add item to pageNav
24 | 
25 |       pageNavHtml += `
  • 
26 |         ${title}
27 |       
    • `;
28 |     } );
29 |     // add pageNavHtml to page
30 |     $('.page-nav').html( pageNavHtml );
31 | 
32 |     file.contents = Buffer.from( $.html() );
33 |     next( null, file );
34 |   } );
35 | };
36 | 


--------------------------------------------------------------------------------
/templates/page.hbs:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 |   
 7 | 
 8 |   {{productName}} v2 · {{#if page.is_homepage}}{{description}}{{else}}{{page.title}}{{/if}}
 9 | 
10 |   {{#if isDev}}
11 |     {{#each cssPaths}}
12 |       
13 |     {{/each}}
14 |   {{else}}
15 |     
16 |   {{/if}}
17 | 
18 |   {{! Twitter Cards }}
19 |   
20 |   
21 |   
22 |   
23 |   
24 | 
25 | 
26 | 
27 | 
28 | {{> top-banner}}
29 | 
30 | {{> site-nav}}
31 | 
32 | {{#if page.is_homepage}}
33 |   {{> hero-carousel}}
34 | {{/if}}
35 | 
36 | 
    
37 |   
    
38 |     {{#if page.title}}
39 |       
    {{page.title}}
    
40 |     {{/if}}
41 | 
42 |     {{#if page.is_homepage}}
43 |       {{> big-links}}
44 |     {{/if}}
45 | 
46 |     
      
47 | 
48 | {{! remove preceding whitespace for 
       blocks }}
49 | {{{main}}}
50 |   
      
51 | 
      
52 | 
53 | {{> site-nav}}
54 | 
55 | {{> site-footer flickity=true}}
56 | 
57 | {{#if isDev}}
58 |   {{#each jsPaths}}
59 |     
60 |   {{/each}}
61 | {{else}}
62 |   
63 | {{/if}}
64 | 
65 | {{#unless isExport}}
66 |   
70 |   
71 | {{/unless}}
72 | 
73 | 
74 | 
75 | 


--------------------------------------------------------------------------------