Super Tiny Cross-fading Image Slideshow with jQuery and CSS3 - cslider

cslider is a basic & lightweight jQuery images slideshow/carousel plugin that features auto play, image caption, pager navigation, infinite loop, and transition animations.

How to use it:

1. Add the following CSS styles into your CSS file or include the jquery.cslider.css directly in the head section.

#cslider {
width: 660px;
height: 250px;
overflow: hidden;
position: relative;
z-index: 1;
}
#cslider img {
position: absolute;
top: 0px;
width: 100%;
}
.cslider-nav {
float: left;
position: absolute;
text-align: center;
left: 10px;
bottom: 10px;
z-index: 1000;
}
.cslider-nav a {
background: #fff;
color: #000;
font-family: verdana;
text-decoration: underline;
opacity: 0.8;
font-weight: bold;
padding: 2px 7px;
cursor: pointer;
}
.cslider-nav a.active {
background: #333;
color: #fff;
font-family: verdana;
text-decoration: underline;
opacity: 0.8;
font-weight: bold;
padding: 2px 7px;
cursor: pointer;
}
.cslider-caption {
position: absolute;
right: 10px;
bottom: 10px;
background: #000;
color: #fff;
z-index: 8;
padding: 3px 5px;
cursor: pointer;
}
.cslider-caption a {
color: #fff;
text-decoration: none;
}

2. Wrap the images and caption text in a container.

<div id="cslider">
      <img src="images/01.jpg">
      <img src="images/02.jpg">
      <img src="images/03.jpg">
      <p class="cslider-caption">Caption 1</p>
      <p class="cslider-caption">Cpation 2</p>
      <p class="cslider-caption">Caption 3</p>
</div>

3. Include the jQuery library and the jQuery cslider plugin at the end of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="javascripts/jquery.cslider.js"></script>

4. Call the plugin to initialize the image slideshow.

<script>
$(function() {
$('#cslider').cslider();
});
</script>

5. Options and defaults.

<script>
$(function() {
$('#cslider').cslider({
intervalSec: 5000,
transitionSec: 2000,
slideImgSelector: '#cslider img',
slideCaptionSelector: '#cslider .cslider-caption',
visibleCaption: true,
centeringImg: true,
cssPositionAttr: 'data-css-position',
cssPositionUpdate: 'original',
displayHeight: 250,
visibleNav: true,
navigationClass: 'cslider-nav',
navigationSelectedClass: 'active'
});
});
</script>

---

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