Responsive & Mobile-first Image Slider Plugin - Phantom Touch Slider

Phantom Touch Slider is a jQuery plugin to create a responsive, touch-enabled and mobile-optimized image slider for your featured contents.

Features:

• Lightweight and easy to use.
• Supports touch swipe and mouse drag to switch between images.
• Infinitely loops through a set of images like a carousel.
• Supports animated rich Text image captions.
• 60+ jQuery easing options.
• Cross browser & cross device.

Dependencies:

• jQuery
• jQuery Mobile
• jQuery UI

How to use it:

1. Add the necessary Javascript libraries in the Html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>

2. Add the jQuery Phantom Touch Slider plugin after jQuery Javascript library.

<link rel="stylesheet" href="css/phantom.slider.css">
<script src="js/phantom.slider.min.js"></script>

3. Create the Html structure for an image slider using plain Html markup.

<ul class="slider phs">
  <li> <img src="images/1.jpg" alt="image 1"> <span>
    <h2> Title 1 </h2>
    Description 1 </span> </li>
  <li> <img src="images/2.jpg" alt="image 2"> <span>
    <h2> Title 2 </h2>
    Description 2 </span> </li>
  <li> <img src="images/3.jpg" alt="image 3"> <span>
    <h2> Title 3 </h2>
    Description 3 </span> </li>
</ul>

4. Initialize the image slider with optional settings.

$(document).ready(function() {
$(".slider").phslider({
width: '100%',
height: '100%',
animation_time: 500,
easing: 'linear', // jquery easing effects
animation: 'slide', // fadeslide, slide or fade
title_time: 200,
title_easing: 'linear',
controls: true, // display controls
autoplay: false // auto play on page loaded
});
})

5. Methods.

// Set autoplay On or Off
$(".slider").phslider('autoplay');

// Go to previous slide
$(".slider").phslider('prev');

// Go to next slide
$(".slider").phslider('next');

// Destroy
$(".slider").phslider('destroy');

---

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