jquery slide.it.js

Zero Configuration

  • this is 1
  • this is 2
  • this is 3
$('#s1').slideIt();

Vertical

  • test 1
  • test 2
  • test 3
$('#s3').slideIt({'orientation': 'vertical'});

No Controls, Interval 1000ms

  • test 1
  • test 2
  • test 3
$('#s2').slideIt({'interval': 1000,'showNumbers': false});

Custom Controls

  • test 1
  • test 2
  • test 3
<style>
/*different styling for #s4/
#s4 .slide-pager li {
padding: 4px;
margin: 2px;
font-size: 0px;
border-radius: 8px;
background-color: #000;
float: left;
}
#s4 .slide-pager li.active {
background-color:red
}
</style>
$('#s4').slideIt({'showNumbers': false});

Titled Controls

  • test 1
  • test 2
  • test 3
//add data-title attribute to each li
$('#s5').slideIt({'showNumbers':false});

Titled Controls - Tab Style

  • test 1
  • test 2
  • test 3
//add data-title attribute to each li
$('#s6').slideIt({
'auto':false,
'animate':false,
'showNumbers':false
});

Tab Style - Hover

  • test 1
  • test 2
  • test 3
//add data-title attribute to each li
$('#s7').slideIt({
'auto':false,
'hover':true,
'animate':false,
'showNumbers':false
});