Neutrino - A flexible jQuery based slideshow

Download   Demo

Neutrino is a flexible jQuery based slideshow plugin that requires minimum markup. Styles are all in the LESS/CSS files and so both the styles and the JavaScript are required for Neutrino to work.

Dependencies

• jQuery Use jQuery < 2.0 if you want to support IE8


• TweenMax

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="css/neutrino.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script type="text/javascript" src="../source/js/neutrino.jquery.js"></script>

2. HTML

<div class="neutrino n1">
	<div class="slide">
		<img src="http://placecage.com/940/300" />
	</div>
	<div class="slide">
		<img src="http://placecage.com/g/940/300" />
	</div>
</div>

3. JAVASCRIPT

$(document).ready(function()
	$('.n1').neutrino();
);

4. OPTIONS

You can customize Neutrino using an options argument (more details on all options will follow):

$(".neutrino").neutrino(options);

options: 
 transitionType: 'slide', // A string representing the type of transition
 transitionTime: 0.75, // The time in SECONDS that the animation between each slides will take.
 timer: 3500, // The time in MILLISECONDS between each animations. 3500 is default. If set to 0, there will not be a timed loop.
 hasArrows: false, // False is default. If set to true, Neutrino will add arrows on each sides of the slideshow.
 hasNav: false, // False is default. If set to true, Neutrino will add a navigation at the bottom of the slideshow.
 slidesPerPage: 1 // 1 is default. If set to a number bigger than 1, Neutrino will change the markup to allow pagination.

options.transitionType : Choices available are

 'slide'
 'slideFluid'
 'fade'

5. METHODS

goToSlide(slideIndex); //Used to change directly to a slide if needed.

Neutrino - A flexible jQuery based slideshow