Easy Responsive Content Slideshow Plugin with jQuery - SimpleSlider

Simple slider is a small content slider, created for people that want to create there own feel to fit their web page.

There are many, and I mean many, different content sliders. They can have a lot of features and skins which can make them big, but if you will use these features that might be what you need. If you don't need a lot of different settings and want to style it by yourself in CSS Simple Slider might be for you. If you can handle CSS, HTML and basic english you can handle this plugin.

How to use it:

1. To get this plugin to work you first need jQuery connected to your webpage. You also need to connect the provided JS file below the jQuery library. 

<script src="jquery.min.js"></script>
<script src="simpleSlider.js"></script>

2. Here is one basic HTML example, the id slider and the the class names, slides and slide makes the jQuery works but you can add your own classes and other elements to add content and design it as you want. In this example you have a p tag and a image, these are styled with normal CSS.

<div id="slider">
  <ul class="slides">
    <li class="slide">
      <p class="slideCaption"><a href="#">Slide 1</a></p>
      <img class="slideImage" alt="img1" src="1.jpg"/>
    </li>
    <li class="slide">
      <p class="slideCaption"><a href="#">Slide 2</a></p>
      <img class="slideImage" alt="img1" src="2.jpg"/>
    </li>
    <li class="slide">
      <p class="slideCaption"><a href="#">Slide 3</a></p>
      <img class="slideImage" alt="img1" src="3.jpg"/>
    </li>
  </ul>
</div>

3. And last you need to add $( "#slider" ).simpleSlider(); inside of a script tag in the bottom of your body.

$( "#slider" ).simpleSlider();

4. If you want to change settings on Simple Slider just open the provided JS file and in the top you will find this object. Here you can set prefered settings as in animation speed or navigation options.

// Animation speed
animationSpeed: 200, 

// Time image is shown
animationPause: 5000, 

// Navigation options, 'dot', 'img' or null(for no one), 
// notice the '' on dot and img but not null;
nav: 'dot', 

// Next previous navigation (Good for mobile use)
arrowNav: true, 

// Pause if user hovers slide
hoverHandler: true 

---

This awesome jQuery plugin is developed by NinjaGrisen. For more Advanced Usages, please check the demo page or visit the official website.