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.

responsive-image-slider

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
Enhanced by Zemanta

Leave a Reply