Image Slideshow With Flash-Like Transitions - CJ Flashy Slideshow

CJ Flashy Slideshow is a jQuery slideshow plugin that automatically switches between images with old school Flash transition effects.

See It In Action:

How to use it:

1. Download and load the jquery.cj-flashy-slideshow.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.cj-flashy-slideshow.js"></script>

2. Add your images to the slideshow container.

<div id="example">
  <img src="1.jpg" width="600" height="400" alt="Image 1" />
  <img src="2.jpg" width="600" height="400" alt="Image 2" />
  <img src="3.jpg" width="600" height="400" alt="Image 3" />
  ...
</div>

3. Initialize the slideshow.

$(function(){
  $('#example').cjFlashySlideShow();
});

4. The example CSS for the slideshow.

#example {
  position: relative;
  display: block;
  width: 600px;
  height: 450px;
  overflow: hidden;
}

5. Set the transition effect you'd like to use:

• bricks (default)
• cubism
• rain 
• blinds
• blinds2
• transport
• transport2

$(function(){
  $('#example').cjFlashySlideShow({
    preset: "cubism"
  });
});

6. You can also create your own transition effects using the following options.

$(function(){
  $('#example').cjFlashySlideShow({
    'xBlocks'   : 12,
    'yBlocks'   : 3,
    'minBlockSize'  : 3,
    'delay'     : 3000,
    'direction'   : 'left',
    'style'     : 'normal',
    'translucent' : false,
    'sloppy'    : false
  });
});

---

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