Picture slider with a Ken Burns effect

In this example we have selected the 'Ken Burns' transition type, and increased the zoom factor. Since we want this to focus on images, we've disabled the pager and controls. Also note that even though captions have been included in the HTML Markup, we have disabled the captions also, so they don't show regardless.

HTML Markup

<ul id="pictures-demo">
  <li title="This is caption 1 <a href='#link'>Even with links!</a>">
    <img src="/assets/img/image-1.jpg" alt="demo1_1">
  </li>
  <li title="This is caption 2">
    <img src="/assets/img/image-2.jpg"  alt="demo1_2">
  </li>
  <li title="And this is some very long caption for slide 3. Yes, really long.">
    <img src="/assets/img/image-3.jpg" alt="demo1_3">
  </li>
  <li title="And this is some very long caption for slide 4.">
    <img src="/assets/img/image-4.jpg" alt="demo1_4">
  </li>
</ul>

jQuery

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

  // options
  adaptiveHeight: false, // height of the sliders adapts to current slide
  captions: false, // Position: overlay, below, custom, false

  // pager
  pager: false,
  
  // controls
  controls: false,
  autoHover: false,

  // transitions
  transition: 'kenburns', // fade, horizontal, kenburns, false
  kenZoom: 140,
  speed: 2000 // time the transition takes (ms)
});
Out-of-the-box Pictures Portfolio News Shop Thumbnails CSS vs jQuery