Download
User Rating: 0/5 ( 0 votes)
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
Source: sympies.com
1. INCLUDE JS FILES
<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>
2. HTML
<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>
3. JAVASCRIPT
$(document).ready(function() {
$(".slider").phslider({
'animation_time':700,
'easing':'easeInOutQuint',
'animation':'slide',
'title_time':400,
'title_easing':'easeInOutBack',
'controls':true,
'autoplay':1000
});
});
4. OPTIONS
width: '100%',
height: '100%',
animation_time: 500,
easing: 'linear',
animation: 'slide',
title_time: 200,
title_easing: 'linear',
controls: true,
autoplay: false
5. METHODS
SET AUTOPLAY ON / OFF
jQuery(selector).click(function() {
jQuery(".slider").phslider('autoplay');
})
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');
})
JS Tutorial
