A Pen by Ben Grosser.

index.html

<div id="container">
  <div class="slideshow"> 

    <img src="http://bengrosser.com/share/344/cycle1.png" width="851" height="315">
    
    <img src="http://bengrosser.com/share/344/cycle2.png" width="851" height="315">
    
    <img src="http://bengrosser.com/share/344/cycle3.png" width="851" height="315">
    
    <img src="http://bengrosser.com/share/344/cycle4.png" width="851" height="315">
    
    <img src="http://bengrosser.com/share/344/cycle5.png" width="851" height="315">
        
  </div>
</div>

jQuery-Cycle-Example.markdown

jQuery Cycle Example

A Pen by Ben Grosser on CodePen.

License.

script.js

/* when the HTML page is fully loaded */
$(document).ready(function() {

  /* find a tag w/ class 'slideshow' and apply
     the cycle effect to it with the following
     options
  */
  $('.slideshow').cycle({
  
    fx:'fade',      /* type of transition */
    timeout: 3000,  /* time between transitions */
    pause:1,        /* allows mouse hover to pause */
    speed: 800     /* how fast to transition */
   
  });

});

/*

try these alternate 'fx' values

blindZ
cover
growY
scrollUp (Down/Right/Left)
shuffle
toss 
wipe

(see the full list of fx options here:
http://jquery.malsup.com/cycle/browser.html)


*/

style.css

#container {
  margin:auto;
  width:851px;
  margin-top:20px;
}

.slideshow img {
  padding:15px;
  border:1px solid #ccc;
  background-color:#eee;
}