Simple Flexible jQuery Slideshow Plugin - Neutrino

Yet another jQuery slideshow/carousel plugin which allows you to loop through a group of images (or Html elements) with animation, navigation and pagination.

Basic Usage:

1. Include jQuery library and the jQuery Neutrino plugin in the Html page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="source/js/neutrino.jquery.js"></script>

2. Include the required TweenMax library in your page.

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

3. Insert your images into DIV elements as follows.

<div class="neutrino demo">
  <div class="slide"> <img src="1.jpg"> </div>
  <div class="slide"> <img src="2.jpg"> </div>
  <div class="slide"> <img src="3.jpg"> </div>
</div>

4. The sample CSS to style the slideshow and controls.

.neutrino {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden
}

.neutrino nav {
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 9999
}

.neutrino nav ul {
  margin: 0 auto;
  padding: 0 5px;
  list-style-type: none;
  height: 30px;
  line-height: 30px
}

.neutrino nav ul li {
  cursor: pointer;
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url('../img/navBtnsSprite.png') no-repeat center top
}

.neutrino nav ul li.active { background-position: center bottom }

.neutrino nav ul li+li { margin-left: 5px }

.neutrino .slide {
  width: 100%;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  display: none
}

.neutrino .slide:first-child { display: block }

.neutrino .slide.floating {
  display: block;
  position: relative;
  top: auto;
  left: auto;
  float: left
}

.neutrino .slide img { max-width: 100% }

.neutrino .slideContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  display: none
}

.neutrino .slideContainer:first-child { display: block }

.neutrino .arrow {
  height: 45px;
  width: 45px;
  cursor: pointer;
  position: absolute;
  top: 127.5px;
  z-index: 9999
}

.neutrino .arrow.left {
  left: 10px;
  background: url('../img/leftArrow.png')
}

.neutrino .arrow.right {
  right: 10px;
  background: url('../img/rightArrow.png')
}

5. Initialize the plugin with default settings.

$('.demo').neutrino();

6. All the default settings.

• transitionType: 'slide': 'slide', 'slideFluid' or 'fade'
• 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.

Change log:

2014-07-30

• Changed jQuery integration because the old way calling the public functions was not working. Now functions that are named with an underscore cannot be called outside of the plugin. Functions that do not have an underscore can be called, such as goToSlide. Calling public functions goes like this : .neutrino('functionName', arg, arg, ...);

---

This awesome jQuery plugin is developed by LaGrangeMtl. For more Advanced Usages, please check the demo page or visit the official website.