stopplay

Features:

  • the ability to create slide transition effects;
  • static/dynamic pagination;
  • transition effects for HTML slider titles/captions;
  • start/stop buttons;
  • "current/total" images counter (e.g. the 2nd of 3);
  • progressbar;

Description

Files needed to work with the slider:

  • jquery-1.7.min.js – jQuery library (the slider will work with this version of library only);
  • jquery.easing.1.3.js – easing effects needed for creating an animation;
  • tms-0.4.x.js – the slider’s functionality;
  • demo.css – the set of CSS styles for the slider stylization;
  • demo.js – slider initialization;

To start with please include the following files in the <head> section of HTML file:

<link rel="stylesheet" href="css/demo.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/tms-0.4.x.js"></script>
<script type="text/javascript" src="js/demo.js"></script>

The HTML Slider Structure:

<div class="slider">
	<ul class="items">
		<li><img src="images/slide-1.png" /></li>
		<li><img src="images/slide-2.png" /></li>
		<li><img src="images/slide-3.png" /></li>
		<li><img src="images/slide-4.png" /></li>
		<li><img src="images/slide-5.png" /></li>
	</ul>
</div>

If there are any HTML titles and navigation buttons in the slider, the HTML code will be the following:

<div class="slider">
	<ul class="items">
		<li><img src="images/slide-1.png" /><span class="banner">banner content</span></li>
		<li><img src="images/slide-2.png" /><span class="banner">banner content</span></li>
		<li><img src="images/slide-3.png" /><span class="banner">banner content</span></li>
		<li><img src="images/slide-4.png" /><span class="banner">banner content</span></li>
		<li><img src="images/slide-5.png" /><span class="banner">banner content</span></li>
	</ul>
</div>
<a href="#" class="prev">prev</a> <a href="#" class="play">play</a> <a href="#" class="next">next</a>

The core styles are located in demo.css file. The most important requirement for the slider stylization is the following CSS rule - .items {display:none;} - do not change it. All other attributes are editable.

Initialization

slider initialization is set in demo.js file:

$(document).ready(function(){
	$('.slider')._TMS({
		show:0,
		pauseOnHover:false,
		prevBu:'.prev',
		nextBu:'.next',
		playBu:'.play',
		duration:1100,
		preset:'fadeThree',
		pagination:true,//'.pagination',true,'<ul></ul>'
		pagNums: false ,
		slideshow:7000,
		numStatus:true,
		banners:false,// fromLeft, fromRight, fromTop, fromBottom
		waitBannerAnimation:false,
		progressBar:'<div class="progbar"></div>'
	})		
 })

The initialization occurs on the event $(document).ready(). Parameters:

  • preset – the preset that will be used. All presets are located in tms-0.4.x.js;
  • duration – the animation time in milliseconds;
  • pagination – the pagination, there are three possible values:
    • (true/false, by default false) - use/do not use the pagination;
    • css path to the sepately created pagination, f.e. ".pags";
    • pagination HTML code, f.e. "<ul><li><a href="#"></a></li></ul>", it will be added to the block div;
  • pagNums – possible values - true/false - sets images numbers in order;
  • numStatus – possible values - true/false - creates the counter in the slider;
  • playBu, nextBu, prevBu – set the css class for the buttons which turn the slideshow on/off, switch the last/next image;
  • slideshow – the number of milliseconds in which one image change another, false by default;
  • progressBar – progressbar, that is displayed in the slideshow and changes its length as the pictures change one another f.e. '<div class="progbar"></div>', corresponding CSS styles should be created for this class;
  • banners – possible values:
    • true/false - turn banners on/off;
    • fade, fromLeft, fromRight, fromTop, fromBottom - the ready-made presets to display the banners;
  • pauseOnHover – possible values - true/false - as soon the cursor is put over the slider area the animation stops;
  • waitBannerAnimation – possible values - true/false - the feature is used for simultaneous (false) or gradual (true) animation of the banner and the image;
  • show – indicates the number of the slide to start the animation from, the count starts from 0.