Skip to content


Subversion checkout URL

You can clone with
Download ZIP
A light weight jQuery plugin for a flick gallery in smart phone.
JavaScript CoffeeScript CSS Shell
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.



A light weight jQuery plugin to implement flick gallery for smart phone.


Main features of this plugin are:

  • Light weight. (3.4k)
  • Designer friendly. (HTML based)

This plugin cannot do:

  • Vertical flick scroll (who ever wants?)
  • Auto scrolling with timer. This will need a lot of options that I don't like.


Here is a quick demo.

Tested on iOS Safari and Android 4.0. PC browsers? Yeah. IE? Na.


Right click on this link or you can just clone this project.

How to use

Only 3 steps!

1. Build HTML like below.

<div class="yourElement"><!-- Main container -->

  <div class="container"><!-- Flickable elements container (required) -->
    <div class="containerInner"><!-- (required) -->
      <div id="sea01" class="item"><img alt="" src="images/sea/01.jpg" /></div><!-- must have `item' for class name -->
      <div id="sea02" class="item"><img alt="" src="images/sea/02.jpg" /></div>
      <div id="sea03" class="item"><img alt="" src="images/sea/03.jpg" /></div>

  <div class="nav"><!-- Tab, indicator or something like that (optional) -->
      <li class="sea01"><a href="#sea01">・</a></li>
      <li class="sea02"><a href="#sea02">・</a></li>
      <li class="sea03"><a href="#sea03">・</a></li>

  <div class="arrows"><!-- Next and prev buttons (optional) -->
    <span class="prev">Previous</span><!-- must have `prev' for className -->
    <span class="next">Next</span><!-- must have `next' for className -->


2. Write CSS.

.yourElement .item { width: 200px } /* This is required if you have <img> element in .item element. */
.yourElement .moving {
  /* You can change transition-duration of course. */
  transition: transform .2s ease-out;
  -webkit-transition: -webkit-transform .2s ease-out;
  -moz-transition: -moz-transform .2s ease-out;

3. Include javascripts and run.

<script src="./javascripts/jquery-1.4.3.min.js"></script>
<script src="./javascripts/jquery.flickgal.js"></script>

Available options

    infinitCarousel : false,
    lockScroll      : true
Options Default value Description
infinitCarousel false If true and you have prev/next elements, the last item slides to the first item and vise versa.
lockScroll true Lock horizontal scroll while sliding. If you have large images in .item element, you may want this fasle.

Advanced use

FlickGal provides 3 custom events.

    .on('fg_flickstart', function (e, index) {
      // Emitted when a user starts flicking.

    }).on('fg_flickend', function (e, index) {
      // Emitted when a user ends flicking.

    }).on('fg_change', function (e, index) {
      // Emitted when the item on center changed.


Copyright (c) 2012 Soichi Takamura (
Dual licensed under the MIT and GPL licenses:
Something went wrong with that request. Please try again.