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">
  </a>
  <img src="2.jpg">
  <a href="#">
    <img src="3.jpg">
  </a>
  <img src="4.jpg">
  <img src="5.jpg">
</div>

3. Initialize the plugin to create a default slideshow.

$('.mySlideshow').slideShowAd({
  // 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'

$('.mySlideshow').slideShowAd({
  slideShowType: 'none',
});

6. Config the transition effect.

$('.mySlideshow').slideShowAd({
  duration: 1000,
  interval: 5000,
});

7. Customize the background color of the slideshow.

$('.mySlideshow').slideShowAd({
  backgroundColor: '#f5f5f5',
});

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

$('.mySlideshow').slideShowAd({
  targetBlank: false,
});

9. More plugin options.

$('.mySlideshow').slideShowAd({
  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.