This demo shows the differences between using CSS transitions and jQuery transitions. What's the difference? In a nutshell, CSS uses your graphic card to process the transition, where as using jQuery uses your main processor. However jQuery is generally more backwards compatible than CSS. That said, CSS transitions will revert to jQuery if the browser doesn't support CSS transitions.
<h3>CSS</h3>
<ul id="css-demo">
<li>
<a href="#slide1">
<img src="/assets/img/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>">
</a>
</li>
<li>
<a href="#slide2">
<img src="/assets/img/image-2.jpg" alt="This is caption 2">
</a>
</li>
<li>
<a href="#slide3">
<img src="/assets/img/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="/assets/img/image-4.jpg" alt="And this is some very long caption for slide 4.">
</a>
</li>
</ul>
<h3>jQuery</h3>
<ul id="jquery-demo">
<li>
<a href="#slide1">
<img src="/assets/img/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>">
</a>
</li>
<li>
<a href="#slide2">
<img src="/assets/img/image-2.jpg" alt="This is caption 2">
</a>
</li>
<li>
<a href="#slide3">
<img src="/assets/img/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="/assets/img/image-4.jpg" alt="And this is some very long caption for slide 4.">
</a>
</li>
</ul>
jQuery('#css-demo').slippry({
// general elements & wrapper
slippryWrapper: '<div class="sy-box css-demo" />', // wrapper to wrap everything, including pager
// options
adaptiveHeight: true, // height of the sliders adapts to current slide
useCSS: true, // true, false -> fallback to js if no browser support
autoHover: false,
transition: 'horizontal'
});
jQuery('#jquery-demo').slippry({
// general elements & wrapper
slippryWrapper: '<div class="sy-box jquery-demo" />', // wrapper to wrap everything, including pager
// options
adaptiveHeight: false, // height of the sliders adapts to current slide
useCSS: false, // true, false -> fallback to js if no browser support
autoHover: false,
transition: 'horizontal'
});