Image Slideshow With Billboard Like Transitions - omgbillboard

omgbillboard is a jQuery slideshow plugin to showcase your images in a Billboard-like interface where one image transitions to another as the vertical strips rotate.

How to use it:

1. Insert a group of images into a slideshow container.

<div id="example">
  <img src="https://source.unsplash.com/6cbuCeVeL5k/750x500" alt="">
  <img src="https://source.unsplash.com/LYpkKLm2Us8/750x500" alt="">
  <img src="https://source.unsplash.com/cIfLUEZYLVg/750x500" alt="">
</div>

2. Download the plugin and place the JavaScript file jQuery.OMGBillboard.js after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jQuery.OMGBillboard.js"></script>

3. Initialize the plugin and determine the size of the billboard slideshow.

$(function() {
  $("#example").OMGBillboard({
    'imgWidth': 750,
    'imgHeight': 500
  });
});

4. Specify the number of strips (slices) to generate. Default: 10.

$(function() {
  $("#example").OMGBillboard({
    'imgWidth': 750,
    'imgHeight': 500,
    'numSlices': 10
  });
});

5. Override the default CSS class of strips.

$(function() {
  $("#example").OMGBillboard({
    'imgWidth': 750,
    'imgHeight': 500,
    'sliceClass': 'slice'
  });
});

6. Determine the background color of the billboard slideshow. Default: '#000'.

$(function() {
  $("#example").OMGBillboard({
    'imgWidth': 750,
    'imgHeight': 500,
    'bgColor': '#222'
  });
});

7. Customize the billboard transition effect.

$(function() {
  $("#example").OMGBillboard({
    'imgWidth': 750,
    'imgHeight': 500,
    'rotateSpeed': 500,
    'changeSpeed': 5000
  });
});

---

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