Roller

jQuery

Basic Roller ↑ Back to top

Image 1
Image 2
Image 3
Image 4
Image 5
$('#basic-roller').roller({
  animType:             'slide'
});

Interactive Roller ↑ Back to top

Panel 1
Read more
Panel 2
Read more
Panel 3
Read more
Panel 4
Read more
Panel 5
Read more
$('#interactive-roller').roller({
  animType:             'slide',
  animLength:           300,
  autoRollPauseOnHover: 1,
  buildNav:             [ 'index' ]
});

Transition Types ↑ Back to top

Image 1
Image 2
Image 3
Image 4
Image 5
$('#transition-1-roller').roller({
  animType:    'fade'
});
Image 1
Image 2
Image 3
Image 4
Image 5
$('#transition-2-roller').roller({
  animType:    'slide'
});
Image 1
Image 2
Image 3
Image 4
Image 5
$('#transition-3-roller').roller({
  animType:    'slide-y'
});
Image 1
Image 2
Image 3
Image 4
Image 5
$('#transition-4-roller').roller({
  animType:       'flash',
  animFlashColor: '#ffc'
});