123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596 |
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width" />
- <title>freescroll</title>
- <link rel="stylesheet" href="../css/flickity.css" />
- <style>
- * { box-sizing: border-box; }
- body { font-family: sans-serif; }
- .gallery {
- background: #FAFAFA;
- margin-bottom: 40px;
- }
- .gallery-cell {
- width: 180px;
- height: 200px;
- margin-right: 10px;
- background: #8C8;
- counter-increment: gallery-cell;
- }
- .gallery-cell.is-selected {
- background: #F90;
- }
- /* cell number */
- .gallery-cell:before {
- display: block;
- text-align: center;
- content: counter(gallery-cell);
- line-height: 200px;
- font-size: 80px;
- color: white;
- }
- </style>
- </head>
- <body>
- <h1>freescroll</h1>
- <div class="gallery js-flickity"
- data-flickity-options='{ "contain": true, "freeScroll": true }'>
- <div class="gallery-cell"></div>
- <div class="gallery-cell"></div>
- <div class="gallery-cell"></div>
- <div class="gallery-cell"></div>
- <div class="gallery-cell"></div>
- <div class="gallery-cell"></div>
- <div class="gallery-cell"></div>
- <div class="gallery-cell"></div>
- <div class="gallery-cell"></div>
- </div>
- <div class="gallery js-flickity"
- data-flickity-options='{ "contain": true }'>
- <div class="gallery-cell"></div>
- <div class="gallery-cell"></div>
- <div class="gallery-cell"></div>
- <div class="gallery-cell"></div>
- <div class="gallery-cell"></div>
- <div class="gallery-cell"></div>
- <div class="gallery-cell"></div>
- <div class="gallery-cell"></div>
- <div class="gallery-cell"></div>
- <div class="gallery-cell"></div>
- </div>
- <script src="../bower_components/get-size/get-size.js"></script>
- <script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
- <script src="../bower_components/ev-emitter/ev-emitter.js"></script>
- <script src="../bower_components/unipointer/unipointer.js"></script>
- <script src="../bower_components/unidragger/unidragger.js"></script>
- <script src="../bower_components/fizzy-ui-utils/utils.js"></script>
- <script src="../js/cell.js"></script>
- <script src="../js/slide.js"></script>
- <script src="../js/animate.js"></script>
- <script src="../js/flickity.js"></script>
- <script src="../js/drag.js"></script>
- <script src="../js/prev-next-button.js"></script>
- <script src="../js/page-dots.js"></script>
- <script src="../js/player.js"></script>
- <script src="../js/add-remove-cell.js"></script>
- <script src="../js/lazyload.js"></script>
- </body>
- </html>
|