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

Features

• You control duration between animations and length of animation.
• Possible to put a gap between the items.
• Can have a cover or frame over the content (the example below demonstrates this).
• Slide anything you want—photos, text, videos, etc.
• Super easy to add to a page—take a look at this page’s source code.

Limitations

• Doesn’t automatically size to the content.
  i.e. It is a fixed width and height, and it is not responsive.
• No captions outside of the content area
• No navigation buttons or progress indicators
• Requires a modified setInterval function.
• Requires jQuery (this is a jQuery plugin after all)

If you are looking for something with navigation buttons and indicators, check out my Pixel Pro Content Slider.

How to Use

1. Place your content on the page. It should be wrapped in a <div> with the class "pxproSlider". For example:

   <div id="slideshow1" class="pxproSlider">
   	<img class="pxproItem" src="img/montreal1.jpg" width="810" height="608">
   	<img class="pxproItem" src="img/montreal2.jpg" width="810" height="608">
   	<img class="pxproItem" src="img/montreal3.jpg" width="810" height="608">
   	<img class="pxproItem" src="img/montreal4.jpg" width="810" height="608">
   	<img class="pxproItem" src="img/montreal4.jpg" width="810" height="608">
   </div>

2. Assign the class "pxproItem" to each of the items (usually pictures).

3. Add some CSS to style and position the content slider.

   <style type="text/css">
   /* You probably ought not change these two rules */
   .pxproSlider { position:relative; overflow:hidden; }
   .pxproItem { position:absolute; left:0; top:0; z-index:1; }
   
   /* User editable */
   .pxproSlider {
   	width:1010px;
   	height:570px;
   	background-color:white;
   }
   </style>

4. Add the jQuery library to your page.

5. Add the PxProSlideShow plugin to your page.

6. Activate (call) the slideshow. For example:

   $('#slideshow1').PxProSlideShow({width:810});

7. Optionally, you make want to tweak some of the defaults.

   • duration - defaults to 4000
     This is the delay between animations (expressed in milliseconds). The delay starts when the previous animation finishes, so this is the amount of time the slider content is static on the page.
   • animationDuration - defaults to 2000
     This is how long it will take to animate to the next content (expressed in milliseconds)
   • width
     Enter the width, in pixels, of your content items. This is used for the "slide" animation.
   • animation - defaults to slide
     Content can either cross-fade in place, or slide horizontally. Enter either 'slide' or 'cross-fade'.
   • leftOffset - defaults to zero
     Only needed if you are using a cover image that happens to have an opaque area on the left.

   For example, the slideshow at the top of this page is using:

   $('#slideshow1').PxProSlideShow({duration:6000, width:810, leftOffset:15});

Any Type of Content

It is possible to place anything in these sliders; headers, paragraphs, videos, hyperlinks, etc.