jQuery Automatic BlackEagle Slideshow Plugin

jquery.blackEagleSlideShow.js is a lightweight and easy-to-use jQuery slideshow plugin that automatically generates captions from img's title attribute.

How to use it:

1. Insert a set of images you want present into a DIV container.

<div id="blackeagle_slideshow">
  <img src="1.jpg" alt="" title="Image 1"/>
  <img src="2.jpg" alt="" title="Image 2"/>
  <img src="3.jpg" alt="" title="Image 3"/>
  <img src="4.jpg" alt="" title="Image 4"/>
</div>

2. Place jQuery library and the jquery.blackEagleSlideShow.js script at the end of the html document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.blackEagleSlideShow.js"></script>

3. Initialize the slideshow plugin.

$.blackEagleSlideShow('#blackeagle_slideshow');

4. The primary CSS styles.

.blackeagle-btn-show-left-image, .blackeagle-btn-show-right-image {
  width: 30px;
  height: 30px;
  z-index: 1;
  position: absolute;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  padding: 5px;
  cursor: pointer;
}

.blackeagle-btn-show-left-image > span.glyphicon-chevron-left {
  color: #fff;
  font-size: 18px;
}

.blackeagle-btn-show-right-image > span.glyphicon-chevron-right {
  color: #fff;
  font-size: 18px;
}

.blackeagle-image-caption {
  background: rgba(0,0,0,0.4);
  bottom: 0;
  width: 100%;
  height: 30px;
  position: absolute;
  z-index: 1;
  color: #fff;
  padding: 5px 10px;
}

5. Plugin's default options.

$.blackEagleSlideShow('#blackeagle_slideshow',{

  // transition delay
  'delay': 3000,

  // fade animation speed
  'fadeSpeed': 500,

  // show caption bar
  'showCaption': true,

  // max height/width
  'imageMaxWith': 'auto',
  'imageMaxHeight': 'auto',

  // show navigation
  'showNavigation': true
  
});

---

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