jquery slider plugin

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 1s

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

            });

← back to htmlstack.com source code →