Automatic Slideshow With Fade/Slide/Flip Transitions - cb-slideshowad-js

File Size: 19.9 KB
Views Total: 1129
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Automatic Slideshow With Fade/Slide/Flip Transitions - cb-slideshowad-js

cb-slideshowad.js is a lightweight and feature-rich jQuery slideshow plugin designed to infinitely rotate through a collection of images with accompanying links. 

Equipped with 7 engaging transition effects, which are perfect for showcasing your products, services, ads, banners, featured posts in a captivating way.

How to use it:

1. Download the plugin and include the jquery.slideshowad.js script after jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/dist/jquery.slideshowad.js"></script>

2. Add a collection of images with links to the slideshow container.

<div class="mySlideshow">
  <a href="#">
    <img src="1.jpg">
  <img src="2.jpg">
  <a href="#">
    <img src="3.jpg">
  <img src="4.jpg">
  <img src="5.jpg">

3. Initialize the plugin to create a default slideshow.

  // options here

4. Hide the slideshow untile all images are loaded.

.mySlideshow {
  display: none;

5. Apply a transition effect to the slideshow.

  • 'fade' (default)
  • 'flipY'
  • 'flipX'
  • 'slideLeft'
  • 'slideRight'
  • 'slideTop'
  • 'slideBottom
  • 'none'
  slideShowType: 'none',

6. Config the transition effect.

  duration: 1000,
  interval: 5000,

7. Customize the background color of the slideshow.

  backgroundColor: '#f5f5f5',

8. Determine whether to open the link in a new tab/window.

  targetBlank: false,

9. More plugin options.

  width: '',
  height: '',
  zIndex: 999,

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