Full Width Responsive Image Slider with jQuery – Slippry
Slippry is a full width Responsive Image Slider with HTML5 + CSS3 + jQuery. Slippry is created with latest jQuery functions, CSS3 tricks and HTML5 elements with gracefull downgrades for older browsers. It can be styled with Sass or CSS and has multiple transition options including Ken Burns effect.
Detailed documentation on the website settings page.
Slippry is a pretty customisable slider, some random combinations of options and the function settings and CSS (if applicable) to recreate them.
Download Slippry Slider (.zip)
Installation of Slippry Slider
Use the following code in your HTML document’s <head> as a starter:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/slippry.min.js"></script>
<link rel="stylesheet" href="/css/slippry.css" />
Write some HTML:
<ul id="slippry-demo">
<li>
<a href="#slide1">
<img src="images/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>">
</a>
</li>
<li>
<a href="#slide2">
<img src="images/image-2.jpg" alt="This is caption 2">
</a>
</li>
<li>
<a href="#slide3">
<img src="images/image-3.jpg" alt="And this is some very long caption for slide 3. Yes, really long.">
</a>
</li>
<li>
<a href="#slide4">
<img src="images/image-4.jpg" alt="And this is some very long caption for slide 4.">
</a>
</li>
</ul>
Call Slippry slider
Make sure it’s called within $(document).ready()!
jQuery(document).ready(function(){
jQuery('selector').slippry()
});
Finished
Compatibility: All Modern Browsers
Website: http://slippry.com/
Download: https://github.com/booncon/slippry
Related articles
- Responsive Flexible jQuery Slider – SlideMe (smashingweb.info)
- Slippry: A Free jQuery Responsive Slider Plugin for Modern Times (designinstruct.com)
- 20 Most Amazing See Examples Of jQuery Tutorials (hturl.wordpress.com)
- 7 Slider : jQuery Responsive Image Slider (jqueryrain.com)
- Storyline 3D Slider with jQuery & CSS3 (jqueryrain.com)
