Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Slider with css3 transitions and many effects
JavaScript CSS
Branch: master

no require polyfills

latest commit 2fb531706c
elclanrs authored
Failed to load latest commit information.
css add timer
img ur
js no require polyfills
less update
.gitignore optimization, cleanup
README.md no require polyfills
grunt.js ur
index.html u

README.md

jq-tiles

Slideshow with many cool css3 effects.

Demo: http://elclanrs.github.com/jq-tiles/ (Use Google Chrome for best experience)
Support: Webkit, Firefox, Opera, IE10, IE9-8*
License: MIT

Options:

{
  x              : 4, // # of tiles in x axis, 20 max
  y              : 4, // # of tiles in y axis, 20 max
  effect         : 'default',
  fade           : false, // fade images in addition to the tiles effect
  random         : false, // animate tiles in random order
  reverse        : false, // start animation from opposite direction
  backReverse    : false, // reverse the animation when going back in the slideshow (useful for some effects)
  rewind         : false, // reverse animation at a certain percentage in time
  auto           : false, // Start the slideshow on load
  loop           : false, // Start slideshow again when it finishes
  slideSpeed     : 3500, // time between slides
  tileSpeed      : 800, // time to clear all tiles
  cssSpeed       : 300, // css3 transition speed [100,200,300,400,500,600,700,800,900,1000],
  nav            : true, // Add navigation
  navWrap        : null, // Add the navigation to an existing element
  bullets        : true, // Show bullets, if false the show pagination with numbers
  thumbs         : true, // Show thumbnails when hovering nav
  thumbSize      : 25, // Thumbnail size (percentage of the original image)
  timer          : true // show or hide the timer bar
  beforeChange   : function() {}, // Runs before changing the image
  afterChange    : function() {} // Runs after the tiles have cleared
  onSlideshowEnd : function() {} // Runs when the slideshow finishes ( "loop" must be set to false )
}

Methods:

start

$('.slider').tilesSlider('start')

stop

$('.slider').tilesSlider('stop')

next

$('.slider').tilesSlider('next', callback)

prev

$('.slider').tilesSlider('prev', callback)

Usage:

HTML:

<div class="slider">
  <img src="img1.jpg"/> <!-- No description -->
  <img src="img2.jpg"/><p>Description image two</p>
  <img src="img3.jpg"/><p>Description image three</p>
</div>

CSS:

.slider { width: 600px; height: 400px; }

jQuery:

$('.slider').tilesSlider({ random: true })
Something went wrong with that request. Please try again.