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

File Size: 6.43 MB
Views Total: 1544
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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.


How to use it:

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

<script src=""></script>
<script src=""></script>
<script src=""></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>

4. Initialize the image slider with optional settings.

$(document).ready(function() {
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

// Go to previous slide

// Go to next slide

// Destroy

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