Simple And Elegant Image Carousel jQuery Plugin - terseBanner

File Size: 2.38 MB
Views Total: 7501
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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">
    <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>

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


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


  // ['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:


  init     : $.noop, 
  before   : $.noop, 
  after    : $.noop, 

6. API methods

// goto next image

// back to previous image

// goto image 3

Change log:


  • bugs fixed


  • v2.3.3: bugfixed and improvement



  • Adjusted callback functions.


  • Bug fixed

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