Tiny jQuery Slider Plugin with Keyboard Support - SimpleSlider

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

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.