I have not tried this one yet, but the Slick Carousel is worth looking into.

A Simple Content Slider

I was not able to find a content slider simple enough and stable enough for my needs, so I wrote my own. Take a look at the source code; everything is there.

	This is a header and some paragraph text.

Features

• You control slide animation properties like duration and easing
• You use your own graphics for previous and next buttons, or if you even want to see them
• Use your own graphics for slide indicator buttons (such as dots or tabs)
• The slide indicators are actual navigation buttons (i.e. you can jump to a specific slide)
• Slide anything you want—photos, text, videos, etc.

Limitations

• Doesn't automatically size to the content, i.e. it is a fixed width and height
• No captions outside of the content area

I would like to be able to merge this with the automatically (timed) slider at some point.

How to Add to Your Page

1. Create a structure on your webpage that will hold the navigation buttons, the images, and the indicator buttons. I use a table, but you can lay it out using CSS instead.

   <table>
   <tr>
   	<td><button class="PxSliderPrev"></button></td>
   	<td><div class="PxSliderWrapper">
   		<div class="PxSliderContent"><img src="image1.jpg"></div>
   		<div class="PxSliderContent"><img src="image2.jpg"></div>
   		<div class="PxSliderContent"><img src="image3.jpg"></div>
   		<div class="PxSliderContent"><img src="image4.jpg"></div>
   		</div>
   	</td>
   	<td><button class="PxSliderNext"></button></td>
   </tr>
   <tr>
   	<td colspan="3" class="PxSliderIndicators"></td>
   </tr>
   </table>

   Note: I simplified the above table so that you can see the critical elements that make it work. In practice, you would very likely want to add some additional classes or style tags to format the table nicely.

   Make sure that the four classes are defined somewhere on your page:

   1. PxSliderPrev: Place on an element that will handle backwards navigation
   2. PxSliderNext: Place on an element that will handle forwards navigation
   3. PxSliderWrapper: Place on a element that will contain all the content items.
   4. PxSliderContent: Place on each element that will be sliding (usually images).

2. Link this external CSS file. Example:

   <link href="css/PxContentSlider.css" type="text/css" rel="stylesheet">

3. Link this external Javascript file. Example:

   <script type="text/javascript" src="PxContentSlider.js"></script>

4. Add jQuery to your page.

5. Optional: Customize the graphics, layout, and color.

   1. PxContentSliderGfx.png is the left and right navigation buttons.
   2. PxContentSliderIndicator.png is the slider indicators that appear below the slideshow.
   3. Layout is determined entirely by you.
   4. Look at lines 55 and 56 of PxContentSlider.js if you want numbers to appear in the indicator.
   5. The size of the content area is on lines 3 and 4 of PxContentSlider.css.