jQuery Tiles Slider with CSS3 Transitions and Transforms

Tiles Slider is a jQuery plugin for creating a responsive tiled image slider which allows to automatically swap images with CSS3 transitions and transforms.

How to use it:

1. Include jQuery library and the jQuery tiles slider plugin's script at the bottom of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquery-tiles-slider.js"></script>

2. Add a set of images into the document using Html unordered list.

<ul class="tiles-slider">
  <li><img src="1.jpg" alt="image"></li>
  <li><img src="2.jpg" alt="image"></li>
  <li><img src="3.jpg" alt="image"></li>
  ...
</ul>

3. The required CSS styles for the tiles slider.

.tiles-slider {
  padding: 0;
  list-style-type: none;
  overflow: auto;
  margin-bottom: 0;
  background: #000;
}

.tiles-slider li {
  width: 25%;
  float: left;
  -webkit-transition: transform .3s ease-in-out;
  -moz-webkit-transition: transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
}

.tiles-slider img { width: 100%; }

.tiles-slider li:first-child { width: 50%; }

.shrink-tile {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  transform: scale(0.5);
}

.tiles-slider li:first-child.shrink-tile {
  -webkit-transform: scale(0.25);
  -moz-transform: scale(0.25);
  transform: scale(0.25);
}

---

This awesome jQuery plugin is developed by affansajid. For more Advanced Usages, please check the demo page or visit the official website.