tileSlideshow is a Simple jQuery-based random slideshow plugin

sex shop sex shop sex shop sex shop sex shop seks shop spanish fly psikolog sohbet numara sohbet hatti

Source: typical000.github.io

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="tileSlideshow.css" >
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="tileSlideshow.js"></script>

2. HTML

Start with a single containing element, in this example is <div class="tile-container">. After, create a list of items (blocks) with the same class (In this example there are <div class="tile-item">). Inside each item insert inner element that will be switched (slided) in given interval (in our example there are just <img> tags. Buy you can use any html tag you need)

<div class="tile-container">
  <div class="tile-item">
    <img src="#" alt=""/>
    <img src="#" alt=""/>
    <img src="#" alt=""/>
  </div>
  <div class="tile-item">
    <img src="#" alt=""/>
    <img src="#" alt=""/>
    <img src="#" alt=""/>
    <img src="#" alt=""/>
  </div>
  <div class="tile-item">
    <img src="#" alt=""/>
    <img src="#" alt=""/>
    <img src="#" alt=""/>
    <img src="#" alt=""/>
    <img src="#" alt=""/>
  </div>
</div>

3. JAVASCRIPT

$(window).load(function() {
    $('.tile-container').tileSlideshow();
});

4. CHANGE CSS

After all, take tileSlideshow.css and modify it to your needs, because this plugn was build as more independent from CSS as it can be. You can change anything according to your future website design, except overflow, opacity and z-index parameters.

5. ADVANCED OPTIONS & ACCESS TO SLIDESHOW

Listed below are all of the options available to customize tileSlideshow to suite your needs.

animation: 'fade'        // Animation type. Supported values: 'fade', 'moveUp', 'moveDown', 'moveLeft', 'moveRight'
animationSpeed: 500,     // Speed of switch for slided elements
selector: '.tile-item',  // Selector for items that contain sliding images/items
innerSelector: 'img',    // Selector for inner items that will be slided in given interval
itemsPerInterval: 1,     // Number of random container that will be slided in given interval
interval: 1000,          // Interval of time

Also, slideshow is accessible from any point of code vie jQuery .data() method. For example:

$('#container-helpers').data('tileSlideshow').stop();

All this functions are listed below:

1. switchItems
2. play
3. stop
4. destroy

Helper strings have been added too for performing quick actions on slideshow. All this helper strings are listed below:

$('.tile-container').tileSlideshow('switchItems');
$('.tile-container').tileSlideshow('play');
$('.tile-container').tileSlideshow('stop');
$('.tile-container').tileSlideshow('destroy');