Image Slideshow With Tiles Transitions - Tiles Slider

The Tiles Slider jQuery plugin lets you create a fancy slideshow that automatically switches between images with creative, unique tiles transition effects.

How to use it:

1. Insert a group of images into a DIV container.

<div class="example" id="example">
  <img src="1.jpg" alt="">
  <img src="2.jpg" alt="">
  <img src="3.jpg" alt="">
  <img src="4.jpg" alt="">
  <img src="5.jpg" alt="">
  ...
</div>

2. Insert jQuery library and the JavaScript jquery.tiles-slider.js at the bottom of the webpage.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="jquery.tiles-slider.js"></script>

3. Call the function tilesSlider function on the top container and done.

$(function(){

  $('#example').tilesSlider();

});

4. Set the time to wait before switching to the next image.

$('#example').tilesSlider({
  delay: 400
});

5. Specify the number of tiles in the shape.

$('#example').tilesSlider({
  tiles: 16
});

6. Change the default transition effect 'stairway' to 'chaotic'.

$('#example').tilesSlider({
  effect: 'chaotic'
});

Changelog:

2018-12-05

• added tests and es5 support

---

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