freescroll.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width" />
  6. <title>freescroll</title>
  7. <link rel="stylesheet" href="../css/flickity.css" />
  8. <style>
  9. * { box-sizing: border-box; }
  10. body { font-family: sans-serif; }
  11. .gallery {
  12. background: #FAFAFA;
  13. margin-bottom: 40px;
  14. }
  15. .gallery-cell {
  16. width: 180px;
  17. height: 200px;
  18. margin-right: 10px;
  19. background: #8C8;
  20. counter-increment: gallery-cell;
  21. }
  22. .gallery-cell.is-selected {
  23. background: #F90;
  24. }
  25. /* cell number */
  26. .gallery-cell:before {
  27. display: block;
  28. text-align: center;
  29. content: counter(gallery-cell);
  30. line-height: 200px;
  31. font-size: 80px;
  32. color: white;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <h1>freescroll</h1>
  38. <div class="gallery js-flickity"
  39. data-flickity-options='{ "contain": true, "freeScroll": true }'>
  40. <div class="gallery-cell"></div>
  41. <div class="gallery-cell"></div>
  42. <div class="gallery-cell"></div>
  43. <div class="gallery-cell"></div>
  44. <div class="gallery-cell"></div>
  45. <div class="gallery-cell"></div>
  46. <div class="gallery-cell"></div>
  47. <div class="gallery-cell"></div>
  48. <div class="gallery-cell"></div>
  49. </div>
  50. <div class="gallery js-flickity"
  51. data-flickity-options='{ "contain": true }'>
  52. <div class="gallery-cell"></div>
  53. <div class="gallery-cell"></div>
  54. <div class="gallery-cell"></div>
  55. <div class="gallery-cell"></div>
  56. <div class="gallery-cell"></div>
  57. <div class="gallery-cell"></div>
  58. <div class="gallery-cell"></div>
  59. <div class="gallery-cell"></div>
  60. <div class="gallery-cell"></div>
  61. <div class="gallery-cell"></div>
  62. </div>
  63. <script src="../bower_components/get-size/get-size.js"></script>
  64. <script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
  65. <script src="../bower_components/ev-emitter/ev-emitter.js"></script>
  66. <script src="../bower_components/unipointer/unipointer.js"></script>
  67. <script src="../bower_components/unidragger/unidragger.js"></script>
  68. <script src="../bower_components/fizzy-ui-utils/utils.js"></script>
  69. <script src="../js/cell.js"></script>
  70. <script src="../js/slide.js"></script>
  71. <script src="../js/animate.js"></script>
  72. <script src="../js/flickity.js"></script>
  73. <script src="../js/drag.js"></script>
  74. <script src="../js/prev-next-button.js"></script>
  75. <script src="../js/page-dots.js"></script>
  76. <script src="../js/player.js"></script>
  77. <script src="../js/add-remove-cell.js"></script>
  78. <script src="../js/lazyload.js"></script>
  79. </body>
  80. </html>