Loading, hang on a sec

Nerve Slider

9.4

  • Fixed hyperlinking in fullscreen mode

9.3

  • Fixed play/pause bug in Firefox

9.2

  • Added data-slidertheme attribute for images
  • Optimized code for faster rendering of images

9.1

  • Fixed data-slidetransitiondelay attribute support for images
  • Optimized code for faster rendering of images and Dots

9.0

  • Fixed data-slidetransitiondelay attribute support for images

8.9

  • New transition easing support
  • Added data-slidetransitiondelay attribute support for images
Responsive
Responsive, Of Course
Most websites say they're responsive. Lucky for you, Nerve Slider's a step ahead.
Cross-browser friendly
Cross-Browser Friendly
Some browsers simply can't keep up with the modern era. But again, Nerve Slider's got you covered.
Listens to your keyboard
Loves the Keyboard
Nerve Slider responds to your keyboard. Try it out by using the left, right, or escape keys.

Nerve Slider is built around you.

People love to show off; it's in our nature. We like to boast about our fancy new toys and snazzy new work, and we love to do it in style. Built to be flawless, Nerve Slider is perfect for showing to the world that beautiful new photo or that brand-new iPhone app you just developed.

To actualize your passion, many options and customizations come with Nerve Slider that are designed to help you find that perfect harmony between ease and style.

  • Fully responsive (even allows percentages in width and/or height)
  • Adaptable (resizes itself to your browser, with or without aspect ratio)
  • Scaleable (set Nerve Slider to fit, fill, or stretch the images to fit)
  • Mobile supported (allow gestures and dragging)
  • Video supported (allows videos in slides)

Quick Demo Play With It


Getting started with Nerve Slider Download

Add jQuery and Nerve Slider.

This will serve as the engine for the code to run. Make sure you include the jQuery library (and, if you want any extra easing functions, the jQueryUI library) as well as Nerve Slider's JS file and stylesheet inside your <head>.

If you can't host the files yourself, you're more than welcome to use our hosted files as shown.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

<script src="//code.ryanbruzan.net/nerveSlider/jquery.nerveSlider.min.js"></script>
<link rel="stylesheet" href="//code.ryanbruzan.net/nerveSlider/nerveSlider.min.css">

Build your markup.

This part tells the script what to build upon. Here, you include your images that will be used in your slider. These images can be any shape and size, Nerve Slider takes care of the rest.

Check below for more advanced stuff you can throw into your slider.

<div class="yourSlider">
	<img src="test.jpg" alt="">
	<img src="test2.png" alt="">
	<img src="test3.gif" alt="">
	<!-- etc... -->
</div>

Call nerveSlider() on your markup.

This is the important part. The nerveSlider() function tells your markup from step 2 to be built into a slider. Without this step, your markup won't be changed, leaving you with a simple list of images. Calling this function allows Nerve Slider to build itself around your markup, transforming your images and other content into a beautiful slider.

If you don't feel like specifying any options, Nerve Slider will apply the defaults. Keep in mind, most options were made to have a generic default, meaning it might not blend with your site right off the bat. Play around with them to see what you can do.

<script>
$(document).ready(function(){
	$(".yourSlider").nerveSlider({
		sliderWidth: "1000px",
		sliderHeight: "400px",
		sliderResizable: true
		// More options below
		});
});
</script>

Enhance your slider.

Here, it gets fun. There are many options to help you suit Nerve Slider up to match your desires. Remember, values with quotation around them require quotation.

Option Name Default Type Description
sliderWidth "1200px" String The width of the slider. Include units.
sliderHeight "500px" String The height of the slider. Include units.
sliderHeightAdaptable false Boolean If true, the slider will adapt to either the current slide's image height or the current slide's content height, depending on which is tallest.
sliderFullscreen false Boolean If true, sets the slider as a backgound slideshow.
sliderAutoPlay true Boolean If true, slides automatically start timed transitions.
waitForLoad false Boolean If true, slider will wait for all slides to load before beginning timed transitions.
slideTransition "slide" String The type of transition that will occur. Allowed values: "slide" | "fade"
slideTransitionDirection "left" String The direction in which the slide transitions. Only applicable when slideTransition is set to "slide". Allowed values: "up" | "right" | "down" | "left"
slideTransitionSpeed 1000 Number The speed of the transition, in milliseconds.
slideTransitionDelay 5000 Number The duration each slide is shown, in milliseconds.
slideTransitionEasing "swing" String The type of easing associated with the slide transition. May require jQueryUI.
slideTransitionStart function(){} Function The callback function to occur just before the transition takes place.
slideTransitionComplete function(){} Function The callback function to occur just after the transition takes place.
slideImageScaleMode "fill" String The type of image sizing/positioning for each slide. Allowed values: "fit" | "fill" | "stretch" | "center" | "none"
slideShuffle false Boolean If true, all slides will be displayed in a random order. Thanks to Joao Pedro for the idea!
slideReverse false Boolean If true, all slides will be displayed in reverse order.
startOnSlide 1 Number The number of the slide to begin the slideshow on. This value is not zero-based.
showFilmstrip false Boolean If true, a set of thumbnails containing the slides will be shown on hover.
showCaptions true Boolean If true, all captions will be displayed (where applicable).
simultaneousCaptions false Boolean If true, captions will appear or disappear in time with the slide transition.
showTimer true Boolean If true, a timer showing the remaining duration of the current slide will be shown.
timerStartWidth "0%" String The starting width of the timer bar. Include units.
timerEndWidth "100%" String The ending width of the timer bar. Include units.
showPause true Boolean If true, a pause/resume button will be shown on hover.
showArrows true Boolean If true, arrows associated with previous/next slide functions will be shown on hover.
showDots true Boolean If true, a set of dots that correspond to each slide will be shown on hover.
showLoadingOverlay true Boolean If true, a loading icon will be shown while the slide image is busy loading.
sliderTheme "light" String The theme the buttons, dots, and timer bar will aquire. Allowed values: "light" | "dark"
slidesDraggable true Boolean If true, slides will become draggable, allowing users to drag & drop to navigate to the next/previous slide. This property is also mobile-friendly.
slidesDraggableMobileOnly false Boolean If true, slidesDraggable will be overridden to "true" only if on a mobile device. Only applicable if slidesDraggable is set to "true".
slidesDragLimitFactor 5 Number The amount, divided from the current slider width/height, of space the user is required to drag in order for a function to be triggered. Only applicable if slidesDraggable is set to "true".
allowKeyboardEvents true Boolean If true, the slider will listen to the keyboard keys. Left: previous | Up: previous | Right: next | Down: next | Escape: pause/resume
sliderResizable true Boolean If true, the slider will adapt to the current parent size.
sliderKeepAspectRatio true Boolean If true, the slider will resize and maintain shape. Only applicable if sliderResizable is set to "true".
preDelay 0 Number The amount of time the slider waits before beginning the timer, in milliseconds.
<script>
$(document).ready(function(){
	$(".yourSlider").nerveSlider({
		option1: value1,
		option2: value2,
		option3: value3
		});
});
</script>

Create your own slide content.

We know you want more than just images. Add your own content on any slide and make it even more awesome. Just wrap your img in a div and create another div with a class of "ns_slideContent" inside.

<div class="yourSlider">
	<div>
		<img src="test.jpg" alt="">
		<div class="ns_slideContent">
			That's right, anything goes here.  Do whatever you want!
		</div>
	</div>
	<img src="test2.png" alt="">
	<img src="test3.gif" alt="">
	<!-- etc... -->
</div>

Customize your images.

Not all images are equal. Make changes to specific slides to perfect your design. You can also wrap any image in an <a> tag to add a link.

Attribute Description Example Usage
data-slidecaption Applies a caption to that slide. Tip: Try out an <h1> <img src="img.jpg" data-slidecaption="<h1>Title</h1>Text" alt="">
data-imagescalemode Overrides the default scale mode for that slide. <img src="img.jpg" data-imagescalemode="fit" alt="">
data-slidetransitiondelay Overrides the default transition delay for that slide. <img src="img.jpg" data-slidetransitiondelay="1000" alt="">
data-slidertheme Overrides the default slider theme for that slide. Allowed values are "light" and "dark". <img src="img.jpg" data-slidertheme="dark" alt="">
<div class="yourSlider">
	<img src="test.jpg" data-slidecaption="<h1>Hello, world!</h1>Caption subtitle goes here." alt="">
	<img src="test2.png" data-imagescalemode="fit" alt="">
	<a href="http://www.ryanbruzan.net/" target="_blank"><img src="test.jpg" data-slidecaption="I have a link!"></a>
	<!-- etc... -->
</div>

Add your own controls.

Using Nerve Slider's API, you can add controls to its basic functions and features.

Function Description Example Usage
nextSlide() Jumps to the next slide. $(".yourSlider").nextSlide();
prevSlide() Jumps to the previous slide. $(".yourSlider").prevSlide();
gotoSlide(#) Jumps to the given slide number. $(".yourSlider").gotoSlide();
togglePause() Pauses or resumes the slider based on its current state. $(".yourSlider").togglePause();
fixImages() Repositions images inside slide. Only use for skewed or offset images. $(".yourSlider").fixImages();
endNerveSlider() Restores the slider markup to before nerveSlider() was called. $(".yourSlider").endNerveSlider();
<script>
$(document).ready(function(){
	$(".yourSlider").nerveSlider();            // Start the slider
		
	$(".customPrevArrow").click(function(){ // When the custom previous arrow is pressed...
		$(".yourSlider").prevSlide();      // Go to the previous slide.
		});
		
	$(".customNextArrow").click(function(){ // When the custom next arrow is pressed...
		$(".yourSlider").nextSlide();      // Go to the next slide.
		});
});
</script>

<div class="yourSlider">
	<img src="test.jpg" alt="">
	<img src="test2.png" alt="">
	<img src="test3.gif" alt="">
</div>

<div class="customPrevArrow">PREVIOUS</div>
<div class="customNextArrow">NEXT</div>

Request Nerve Slider properties.

Sometimes you need some specific information from Nerve Slider.

Property Description Example Usage
selectedSlide Returns the selected slide as an object. $(".yourSlider").data("selectedSlide");
paused Returns whether or not the slider is paused as a boolean value. $(".yourSlider").data("paused");
<script>
$(document).ready(function(){
	$(".yourSlider").nerveSlider();                            // Start the slider
		
	alert($(".yourSlider").data("paused"));                    // Alert a boolean whether the slider's paused or not
		
	alert($(".yourSlider").data("selectedSlide").index());     // Alert the selected slide number on a zero-based scale
});
</script>

<div class="yourSlider">
	<img src="test.jpg" alt="">
	<img src="test2.png" alt="">
	<img src="test3.gif" alt="">
</div>

Licensing & Terms of Use

Copyright © Evolve, Ryan Bruzan.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Download Nerve Slider
Like Nerve Slider? Consider donating with PayPal to keep it alive.