After created the popular FullScreen Background Slider, I wanted to create a smart, but really lightweight slider with simple features, but supports mobiles and tablets. The most of the slider plugins' size is around 40-50kB, so my aims was to make it much more smaller, keep it smart and reach the best balance between features and performance. These expectations motivated me to born Phantom Touch Slider. I achieved my first target successfully, because the size of the plugin minified version is less than 5kB.

You can use the auto-play feature to create a slideshow in any size. Captions and Controls are also optionals. The slider is fast, as you see it is included on this website twice. The slideshow is stop the auto playing when you swipe on the image (you can also emulate that with your mouse pointer) and you can scroll the slides with simply swipe again.

Possible to add any number of images/slides with or without captions. The number of slides only depends on the images' sizes and your website's performance. The slider always fits to the container element, therefore you can easily set the width and height in CSS or jQuery. Probably the one of the best feature of the plugin, that is completely FREE. No hidden costs. You can add any HTML element to the caption, the size of the captions detected by automatically. The entire plugin JavaScript file's size less than 5kB, it is really compact, but contains the most important features. Using jQuery Easing, you can combine the standard slide, fadeslide and fade effect with Easing effects, in results you can use a lot of variations. Offers an opportunity to control the slider from outside of the plugin, you can scroll to the next or previous slide, enable or disable autoplay with simple methods.

Basic Markup

	<ul class="slider phs">
		<li><img src="assets/images/1.jpg"></li>
		<li><img src="assets/images/2.jpg"></li>
		<li><img src="assets/images/3.jpg"></li>
		<li><img src="assets/images/4.jpg"></li>
		<li><img src="assets/images/5.jpg"></li>
	</ul>
		

Basic Markup with Captions

	<ul class="slider2 phs">
		<li><img src="assets/images/1.jpg" alt="image 1"><span>Caption 1</span></li>
		<li><img src="assets/images/2.jpg" alt="image 2"><span>Caption 2</span></li>
		<li><img src="assets/images/3.jpg" alt="image 3"><span>Caption 3</span></li>
		<li><img src="assets/images/4.jpg" alt="image 4"><span>Caption 4</span></li>
		<li><img src="assets/images/5.jpg" alt="image 5"><span>Caption 5</span></li>
	</ul>
		

Initialization

	<script type='text/javascript' src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type='text/javascript' src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
	<script src="assets/js/jquery.mobile.custom.min.js"></script>
	<script src="assets/js/phantom.slider.min.js"></script>
	<script type='text/javascript'>
	jQuery(document).ready(function() {
		$(".slider").phslider({
			'animation_time':700,
			'easing':'easeInOutQuint',
			'animation':'slide',
			'title_time':400,
			'title_easing':'easeInOutBack',
			'controls':true,
			'autoplay':false
			});
		});
	</script>
	

Easing: Check the full list of jQuery Easing Effects.
Animation: Possible values are: 'slide', 'fadeslide', 'fade'.

Methods

Previous Slide

			jQuery(selector).click(function() {
				jQuery(".slider").phslider('prev');
			})
			

Next Slide

			jQuery(selector).click(function() {
				jQuery(".slider").phslider('next');
			})
			

Destroy

			jQuery(selector).click(function() {
				jQuery(".slider").phslider('destroy');
			})