Examples - Portfolio

HTML Markup

<ul id="portfolio-demo">
    <li title="This is caption 1 <a href='#link'>Even with links!</a>">
      <a href="#slide1"><img src="/assets/img/slippry-portf-001.jpg" alt="demo1_1"></a>
    </li>
    <li title="This is caption 2">
      <a href="#slide2"><img src="/assets/img/slippry-portf-002.jpg"  alt="demo1_2"></a>
    </li>
    <li title="And this is some very long caption for slide 3. Yes, really long.">
      <a href="#slide3"><img src="/assets/img/slippry-portf-003.jpg" alt="demo1_3"></a>
    </li>
    <li title="And this is some very long caption for slide 4.">
      <a href="#slide4"><img src="/assets/img/slippry-portf-004.jpg" alt="demo1_4"></a>
    </li>
  </ul>

jQuery

jQuery('#portfolio-demo').slippry({
  // general elements & wrapper
  slippryWrapper: '<div class="sy-box portfolio-slider" />', // wrapper to wrap everything, including pager

  // options
  adaptiveHeight: false, // height of the sliders adapts to current slide
  start: 'random', // num (starting from 1), random
  loop: false, // first -> last & last -> first arrows
  captionsSrc: 'li',
  captions: 'custom', // Position: overlay, below, custom, false
  captionsEl: '.external-captions',

  // transitions
  transition: 'fade', // fade, horizontal, kenburns, false
  easing: 'linear', // easing to use in the animation [(see... [jquery www])]
  continuous: false,

  // slideshow
  auto: false
});

CSS

/* Portfolio */
.portfolio .sy-controls {
  display: block;
}
.portfolio .sy-pager {
  margin: 1.5em 0;
}
.portfolio .external-captions {
  background-color: #fff;
  padding: 1em;
}