Loading, hang on a sec

Nerve Slider

Although not required, donations are greatly appreciated and help keep Nerve Slider alive and free. Help us out »

9.5

Bug fixes
Minified script fixed

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

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.

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="//www.builtbyevolve.com/files/nerveSlider/jquery.nerveSlider.min.js"></script>
<link rel="stylesheet" href="//www.builtbyevolve.com/files/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
		// etc...
	});
});
</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	false	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.builtbyevolve.com/" 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

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