LightWeight Mobile-Friendly, jQuery Slider
HTML JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
example_controls
example_fullscreen
js
.gitattributes
.gitignore
LICENSE
README.md
phantom-slider.jquery.json

README.md

Phantom Touch Slider - jQuery Plugin

Phantom Slider is a Super-LightWeight, Mobile-Friendly, Responsive Slider. Offers medium features with high performance and quality.

Features

  • Unlimited Layers
  • Responsive, always fit to the parent container, Mobile Swipe-Ready
  • Completely FREE with MIT Licence
  • Supports HTML elements in the Captions
  • Clean Code with less than 5kB size
  • 60+ animation style combinations with jQuery Easing
  • init, destroy, autoplay, next, previous Methods for Developers

Usage

<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="jquery.mobile.custom.min.js"></script>
<script src="phantom.slider.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".slider").phslider({
                            'animation_time':700,
                            'easing':'easeInOutQuint',
                            'animation':'slide',
                            'title_time':400,
                            'title_easing':'easeInOutBack',
                            'controls':true,
                            'autoplay':1000
                    });
})
</script>

Basic Markup Without Captions

        <div style="width: 600px;height: 400px;" id="container">
            <ul class="slider phs">
                <li>
                    <img src="images/1.jpg" alt="image 1">
                </li>
                <li>
                    <img src="images/2.jpg" alt="image 2">
                </li>
                <li>
                    <img src="images/3.jpg" alt="image 3">
                </li>
                <li>
                    <img src="images/4.jpg" alt="image 4">
                </li>
                <li>
                    <img src="images/5.jpg" alt="image 5">
                </li>
             </ul>
        </div>

Basic Markup With Captions

        <div style="width: 600px;height: 400px;" id="container">
            <ul class="slider phs">
                <li>
                    <img src="images/1.jpg" alt="image 1">
                    <span>Caption 1</span>
                </li>
                <li>
                    <img src="images/2.jpg" alt="image 2">
                    <span>Caption 2</span>
                </li>
                <li>
                    <img src="images/3.jpg" alt="image 3">
                    <span>Caption 3</span>
                </li>
                <li>
                    <img src="images/4.jpg" alt="image 4">
                    <span>Caption 4</span>
                </li>
                <li>
                    <img src="images/5.jpg" alt="image 5">
                    <span>Caption 5</span>
                </li>
             </ul>
        </div>

In the example above, the container div has a fixed size, but you can also resize it with jQuery to fit to the window or to any other parent element with CSS.

License

Phantom Touch Slider is published under the MIT license. If you would like to use it, please check the conditions on the Demo Page

Demo Page and Full Details

Check out my Premium Slider Plugins:

Theme Slider jQuery FullScreen Touch Slider Plugin

FullScreen Background Slider - jQuery SlideShow

WordPress Plugins & Tutorials