Simple And Elegant Image Carousel jQuery Plugin - terseBanner

terseBanner is a simple, elegant, mobile-friendly jQuery carousel plugin that features custom styles, 4 animation types, image lazy loading, thumbnail navigation, touch events and callback functions.

Basic usage:

1. Include the following JavaScript files on the webpage and the terseBanner plugin is ready for use.

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

2. Create an html list of images and then insert them into a container as this.

<div class="banner">
  <ul>
    <li><img src="1.jpg"></li>
    <li><img src="2.jpg"></li>
    <li><img src="3.jpg"></li>
    <li><img src="4.jpg"></li>
    <li><img src="5.jpg"></li>
    <li><img src="6.jpg"></li>
  </ul>
</div>

3. Call the function on the outer container to initialize the carousel plugin with default options.

$('.banner').terseBanner();

4. Available plugin options that you can overwrite as you like:

$('.banner').terseBanner({

  // ['none', 'fade', 'flash' 'slide']
  animation: 'slide',

  // auto resize image width
  adaptive : false,

  // true = switch betweeing images by hovering the controls
  useHover : false,

  // shows navigation arrows
  arrow    : false,

  // shows pagination buttons
  [true, false, 'ol']
  btn      : true, 

  // autoplay interval
  // 0 = disable
  auto     : 5000, 

  // animation speed
  duration : 800, 
  
  // thumbnails
  thumb    : { }
  
});

5. Callback functions:

$('.banner').terseBanner({

  init     : $.noop, 
  before   : $.noop, 
  after    : $.noop, 
  
});

6. API methods

// goto next image
$('.banner').terseBanner('next');

// back to previous image
$('.banner').terseBanner('prev');

// goto image 3
$('.banner').terseBanner(3);

Change log:

2017-11-28

• bugs fixed

2017-08-30

• v2.3.3: bugfixed and improvement

2017-06-22

• JS update

2017-05-10

• Adjusted callback functions.

2017-05-08

• Bug fixed

---

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