title: JQuery Cycle, how can I change from image to div?
body: <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;JQuery Cycle Plugin - Example Slideshow&lt;/title&gt;
  &lt;style type="text/css"&gt;
  .slideshow { height: 232px; width: 232px; margin: auto }
  .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
  &lt;/style&gt;
  &lt;!-- include jQuery library --&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- include Cycle plugin --&gt;
  &lt;script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"&gt;&lt;/script&gt;
  
  &lt;!--  initialize the slideshow when the DOM is ready --&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $('.slideshow').cycle({
          fx: 'shuffle' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
      });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="slideshow"&gt;
          &lt;img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /&gt;
          &lt;img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /&gt;
          &lt;img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How can I make this exact scroller work with divs instead of img?? </p>
  
  <p>basically, I want to use
  <code>&lt;div&gt; etc etc etc &lt;/div&gt;</code> instead of: <code>&lt;img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /&gt;</code></p>