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

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.