jQuery Automatic BlackEagle Slideshow Plugin

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.

DOWNLOAD

DEMO

How to use it:

• 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>

• 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>

• Initialize the slideshow plugin.

                 
$.blackEagleSlideShow('#blackeagle_slideshow');

• 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;
}

• 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
  'show<a href="http://www.jqueryscript.net/tags.php?/Navigation/">Navigation</a>': true
  
});

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