thecreation / jquery-tinySlider

tinySlider.js is a tiny jQuery plugin that creates a responsive slider with touch support.

TinySlider

tinySlider is a tiny jQuery plugin that creates a responsive slider with touch support.

Usage

You can include javascript file and css first:

<link rel="stylesheet" href="path/to/your/tinySlider.css">
<script src="path/to/your/jquery-tinyslider.min.js"></script>

Then init the slider for the structure

<div class="slides">
	<ul>
		<li>
		  <img src="img/1.jpg" />
		</li>
		<li>
		  <img src="img/2.jpg" />
		</li>
		<li>
		  <img src="img/3.jpg" />
		</li>
	</ul>
</div>
<script>
jQuery(function($) {
  $('.slides').tinySlider();
});
</script>

Options

You're also able to use some of the options that let you customize it as you wish:

$('element').tinySlider({
	namespace: 'tiny', // String: Prefix string attached to the class of every element generated by the plugin

	animation: "fade", // String: Select your animation type, "fade" or "slide"
	easing: "swing",
	duration: 1000, // Integer: Duration of the transition, in milliseconds
	delay: 4000, // Integer: Time between slide transitions, in milliseconds

	pager: true, // Boolean: Show pager, true or false
	nav: true, // Boolean: Show navigation, true or false
	prevText: "Previous", // String: Text for the "previous" button
	nextText: "Next", // String: Text for the "next" button

	random: false, // Boolean: Randomize the order of the slides, true or false
	autoplay: true, // Boolean: Animate automatically, true or false
	pauseOnHover: true, // Boolean: Pause the slideshow when hovering over slider

	useCSS: true, // if use CSS transition, cycle will not works
	touch: true,
	touchSensitivity: 0.25,

	// Callback API
	onStart: null, // Callback: function(slider) - Fires when the slider loads the first slide
	onBefore: null, // Callback: function(slider) - Fires asynchronously with each slider animation
	onAfter: null, // Callback: function(slider) - Fires after each slider animation completes
	onEnd: null // Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
});

License

Copyright (c) 2015 AmazingSurge
Licensed under the GPL license.