Tiny jQuery Slider Plugin with Keyboard Support - SimpleSlider
File Size: | 7.04 MB |
---|---|
Views Total: | 1234 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

SimpleSlider is a minimal jQuery slider plugin that supports custom fade animation, auto play, pause on hover, arrow keys navigation, pager, and next/prev arrow buttons.
How to use it:
1. Load the jQuery javascript library and jQuery simpleSlider.js in the Html document.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script type="text/javascript" src="jquery.simpleSlider.js"> </script>
2. Create the html for a simple slider with next/pre buttons
<div id="wrapper"> <div id="simpleSliderPrevious"><</div> <div id="simpleSliderNext">></div> <div id="sliderContainer"> <ul id="simpleSlider"> <li><img src="images/1.jpg" alt="" /></li> <li><img src="images/2.jpg" alt="" /></li> <li><img src="images/3.jpg" alt="" /></li> ... </ul> </div> </div>
3. The required CSS to style the slider and controls.
/* The slider container */ #sliderContainer { width: 660px; margin: 0 auto; } /* The slider ul stypes, important to note that we hide all the overflow! */ #simpleSlider { width: 660px; height: 300px; overflow: hidden; position: relative; list-style: none; padding: 0; margin: 0 auto; } /* styles for each item */ #simpleSlider li { position: absolute; top: 0px; left: 0px; display: none; } /* display the first item */ #simpleSlider li:first-child { display: block; } /* Our style for the next button, this can be anything */ #simpleSliderNext { float: right; color: #000; font-size: 70pt; font-weight: bold; cursor: pointer; margin-top: 110px; } /* Our style for the previous button, this can be anything */ #simpleSliderPrevious { float: left; color: #000; font-size: 70pt; font-weight: bold; cursor: pointer; margin-top: 110px; } li img { border-radius: 2px; } /* Some margin for your navigation */ #simpleSliderNav { margin: 20px; } /* Styling for the navigation items, this can also be anything we want, but I am using circles */ .simpleSliderNavItem { height: 16px; width: 16px; float: left; background: #000; margin-left: 10px; border-radius: 8px; cursor: pointer; } /* styles for the active nav item */ .active { background: #c10d0d; }
4. Call the plugin with default options.
<script type="text/javascript"> $(document).ready(function() { $('#simpleSlider').simpleSlider(); }); </script>
5. Optional settings to customize the slider.
<script type="text/javascript"> $(document).ready(function() { $('#simpleSlider').simpleSlider({ fadeTime: 500, // the amount of time each slide will take to fade away, and fade into being. interval: 10000, // the amount of time each slide will stay on the screen before the slider will move to the next slider. autoplay: true, // sets the slider to autoplay wantNav: true, // enables or disables slider navigation. navContainer: "#sliderContainer", // the element that the navigation will be appended to should you choose to use it. pauseOnHover: true, // tells the slider whether or not it should pause the slider if the user hovers over a slide. keyboardNav: false // gives the slider the ability to navigate backwards or forwards with the left and right arrow buttons on the keyboard. }); }); </script>
This awesome jQuery plugin is developed by sourfacedcyclop. For more Advanced Usages, please check the demo page or visit the official website.