Designed Slider-Carousel With jQuery – TerseBanner

File Size:1049.77 KB
Views Total:336
Last Update:December 31, 2017
Publish Date:December 30, 2017
Official Website:Go to website
License:MIT

A  jQuery slider-carousel plugin that helps in the features of the custom styles, forr the animation types, image lazy loading, thumbnail navigation, touch events and callback functions and that is done with the help of the TerseBanner.

How to usage:

1. Include the following JavaScript files on the webpage :

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

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

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

4. Available plugin options :

$('.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);

 

Done 🙂