Example One: manual slide
My Groovy Header 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor lacus sit amet nisi tincidunt non venenatis enim laoreet.
My Groovy Header 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor lacus sit amet nisi tincidunt non venenatis enim laoreet.
My Groovy Header 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor lacus sit amet nisi tincidunt non venenatis enim laoreet.
My Groovy Header 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor lacus sit amet nisi tincidunt non venenatis enim laoreet.
jQuery code:
$('#example1').bxSlider({
mode: 'slide',
speed: 250,
wrapper_class: 'example1_container'
});
source code:
Example Two: auto slide
- This list is set to "auto"
- "speed" is set to 1500
- "pause" is set to 3500
- "width" is set to 869
- You can have unlimited list items
jQuery code:
$('#example2').bxSlider({
mode: 'slide',
auto: 'true',
speed: 1500,
pause: 3500,
width: 869,
wrapper_class: 'example2_container'
});
source code:
Example Three: hybrid manual / auto fade
jQuery code:
$('#example3').bxSlider({
mode: 'fade',
speed: 1000,
pause: 5000,
auto: true,
controls: true,
auto_direction: 'right',
next_text: 'next image',
prev_text: 'previous image',
width: 307,
wrapper_class: 'example3_container'
});
source code:
Example four: ticker
"The greatest thing you ever can do now,
Is trade a smile with someone who's blue now,
It's very east just..."
- Robert Plant
jQuery code:
$('#example4').bxSlider({
mode: 'ticker',
speed: 7000,
width: 500,
wrapper_class: 'example4_container'
});
source code: