jQuery Neutrino Plugin Example

Default settings

This is what it looks like using the default settings of Neutrino

$('.n1').neutrino();

Arrows and nav

$('.n2').neutrino({
    hasArrows: true,
    hasNav: true
});

No timer

$('.n3').neutrino({
    hasArrows: true,
    hasNav: true,
    timer: 0
});

Pagination

You might want to show a certain number of images / slides inside one big slide, this is possible.

Of course, since Neutrino lets you place any HTML element you want inside a slide element, you can paginate it yourself (with a templating system or PHP for example), or you could let the script do it for you! If so, the "slide" elements will be placed in "slideContainers" elements and will then be resized to the proper width by JavaScript.

As you will see in the example below, if the last "page" does not contain the same number of slides as the other ones, it will resize the slides inside it so that they take all of the space. So since pages are defined by groups of 3 images here and that we only have 5 elements, the last slide will be composed of 2 images that both take half the space available. If we had 4 images instead of 5, the last one would take 100% of the space available.

$('.n5').neutrino({
    hasNav: true,
    hasArrows:true,
    slidesPerPage:3
});

Fade

$('.n6').neutrino({
    hasNav: true,
    hasArrows:true,
    transitionType:'fade'
});