https://github.com/andrewlaskey/blokr

A 2D Carousel UI Grid
https://github.com/andrewlaskey/blokr

Last synced: 19 days ago
JSON representation

A 2D Carousel UI Grid

• Host: GitHub
• URL: https://github.com/andrewlaskey/blokr
• Owner: andrewlaskey
• Created: 2013-06-28T17:32:35.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2014-02-11T22:11:33.000Z (over 10 years ago)
• Last Synced: 2023-03-24T06:01:30.989Z (over 1 year ago)
• Language: CSS
• Homepage: http://andrewlaskey.github.io/blokr/
• Size: 223 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
blokr

=====

A 2D Carousel UI Grid

Blokr.js is a jQuery plugin that creates a square grid from a list of items. Users can then scroll infinitely through this list by dragging rows and columns.

![blokr_demo](http://i.imgur.com/HXLUWZh.gif)

[Demo](http://andrewlaskey.github.io/blokr/)

##Setting up

Include [hammer.js](https://github.com/EightMedia/hammer.js/)(this makes blokr work on touch devices) and Blokr's javascript and css.

```HTML

```

Set up your grid. The data-size attribute is the length of your rows and columns. Anything can go inside the grid block.

```HTML



	
Block

	


	


	
Block



```


Initialize the plugin.

```JavaScript

$('#myBlocks').blokr();

```

That's it!