Elements Design: 2500 free iPhone web icons
Website: Pix - website template

JS Plugin: jqTiles - slideshow


"With jq-tiles you can create many interesting slide transitions in your slideshow. It is a jQuery plugin that leverages the power of CSS3 and comes with a lot of options."



<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!--[if lt IE 9]>
<script src="//"></script>
<script src=""></script>
<script src="js/jquery.tiles.js"></script>
<link href='' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href=""/>
<link rel="stylesheet" href="css/jquery.tiles.min.css"/>


<div class="slider-wrap">
    <div class="slider">
        <img src="[image 1]"/><p>[info 1]</p>
        <img src="[image 2]"/><p>[info 2]</p>
        <img src="[image 3]"/><p>[info 3]</p>

Option javascript

  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 )


Plugin: jqTiles - slideshow


Tags: slideshow, plugin, jquery, design, develop, layout, website, web

Leave a Comment

No Comment

© Creative3x Ltd.