Loading, hang on a sec |
data-slidertheme
attribute for imagesdata-slidetransitiondelay
attribute support for imagesdata-slidetransitiondelay
attribute support for imagesdata-slidetransitiondelay
attribute support for imagesPeople 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.
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">
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>
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>
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.
<script> $(document).ready(function(){ $(".yourSlider").nerveSlider({ option1: value1, option2: value2, option3: value3 }); }); </script>
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>
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>
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>
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>
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.