grid programme

2020-07-16 17:24:02 +02:00
parent ee476d177c
commit 08b0754135
134 changed files with 15445 additions and 25 deletions
@@ -0,0 +1,150 @@
+# Flickity
+
+_Touch, responsive, flickable carousels_
+
+See [flickity.metafizzy.co](https://flickity.metafizzy.co) for complete docs and demos.
+
+## Install
+
+### Download
+
+ CSS:
+  - [flickity.min.css](https://unpkg.com/flickity@2/dist/flickity.min.css) minified, or
+  - [flickity.css](https://unpkg.com/flickity@2/dist/flickity.css) un-minified
+ JavaScript:
+  - [flickity.pkgd.min.js](https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js) minified, or
+  - [flickity.pkgd.js](https://unpkg.com/flickity@2/dist/flickity.pkgd.js) un-minified
+
+### CDN
+
+Link directly to Flickity files on [unpkg](https://unpkg.com).
+
+``` html
+<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
+```
+
+``` html
+<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
+```
+
+### Package managers
+
+Bower: `bower install flickity --save`
+
+npm: `npm install flickity --save`
+
+## License
+
+### Commercial license
+
+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. Purchase a Flickity Commercial License at [flickity.metafizzy.co](https://flickity.metafizzy.co/#commercial-license)
+
+### Open source license
+
+If you are creating an open source application under a license compatible with the [GNU GPL license v3](https://www.gnu.org/licenses/gpl-3.0.html), you may use Flickity under the terms of the GPLv3.
+
+[Read more about Flickity's license](https://flickity.metafizzy.co/license.html).
+
+## Usage
+
+Flickity works with a container element and a set of child cell elements
+
+``` html
+<div class="carousel">
+  <div class="carousel-cell">...</div>
+  <div class="carousel-cell">...</div>
+  <div class="carousel-cell">...</div>
+  ...
+</div>
+```
+
+### Options
+
+``` js
+var flky = new Flickity( '.gallery', {
+  // options, defaults listed
+
+  accessibility: true,
+  // enable keyboard navigation, pressing left & right keys
+
+  adaptiveHeight: false,
+  // set carousel height to the selected slide
+
+  autoPlay: false,
+  // advances to the next cell
+  // if true, default is 3 seconds
+  // or set time between advances in milliseconds
+  // i.e. `autoPlay: 1000` will advance every 1 second
+
+  cellAlign: 'center',
+  // alignment of cells, 'center', 'left', or 'right'
+  // or a decimal 0-1, 0 is beginning (left) of container, 1 is end (right)
+
+  cellSelector: undefined,
+  // specify selector for cell elements
+
+  contain: false,
+  // will contain cells to container
+  // so no excess scroll at beginning or end
+  // has no effect if wrapAround is enabled
+
+  draggable: '>1',
+  // enables dragging & flicking
+  // if at least 2 cells
+
+  dragThreshold: 3,
+  // number of pixels a user must scroll horizontally to start dragging
+  // increase to allow more room for vertical scroll for touch devices
+
+  freeScroll: false,
+  // enables content to be freely scrolled and flicked
+  // without aligning cells
+
+  friction: 0.2,
+  // smaller number = easier to flick farther
+
+  groupCells: false,
+  // group cells together in slides
+
+  initialIndex: 0,
+  // zero-based index of the initial selected cell
+
+  lazyLoad: true,
+  // enable lazy-loading images
+  // set img data-flickity-lazyload="src.jpg"
+  // set to number to load images adjacent cells
+
+  percentPosition: true,
+  // sets positioning in percent values, rather than pixels
+  // Enable if items have percent widths
+  // Disable if items have pixel widths, like images
+
+  prevNextButtons: true,
+  // creates and enables buttons to click to previous & next cells
+
+  pageDots: true,
+  // create and enable page dots
+
+  resize: true,
+  // listens to window resize events to adjust size & positions
+
+  rightToLeft: false,
+  // enables right-to-left layout
+
+  setGallerySize: true,
+  // sets the height of gallery
+  // disable if gallery already has height set with CSS
+
+  watchCSS: false,
+  // watches the content of :after of the element
+  // activates if #element:after { content: 'flickity' }
+
+  wrapAround: false
+  // at end of cells, wraps-around to first for infinite scrolling
+
+});
+```
+
+---
+
+By [Metafizzy 🌈🐻](https://metafizzy.co)