Cycle Slideshow with different size images not adjusting to images

Cycle Slideshow with different size images not adjusting to images

I believe I am following the Cycle demo, but the display is not adjusting to the different size images.  Here is a 

demo.

And this is setup:

  1. Slideshow with different size images

  3. CSS:

  5. /***** slider *****/
  6. .slider-wrapper {
  7.   margin-top: 80px;
  8. padding:0px;
  9. overflow:hidden;
  10. }
  11. .slider {
  12.   border:10px solid #fff; 
  13.   border-radius:6px;
  14.   margin-left: auto;
  15.   margin-right: auto;
  16. }

  18. .caption {
  19.   font-size: 1.0em;
  20.   color: #fff;
  21.   text-align: center;
  22. font-weight:bold;
  23.   color: #f6c02c;  
  24. }

  26. JS:

  28.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  29.     <script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
  30.     <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
  31.     <script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.3.js"></script>
  32.     <script type="text/javascript">
  33.       $(document).ready(function() {
  34.       $('.slider').cycle({
  35.  fx: 'scrollHorz',
  36.       timeout: 3000,
  37.         after: function() {
  38.             $('#caption').html(this.alt);
  39.         }
  40.      });
  41.     });
  42. </script>

  44. HTML:

  46.   <!-- Beginning of slides -->
  47.   <div class="slider-wrapper">
  48.     <div class="slider">
  49.         <img src="images/5587_120512_b.jpg" width="399" height="600" alt="Smokey Bear"/>
  50.         <img src="images/slide_8105.jpg" width="526" height="350" alt="Brids of Prey"/>
  51.         <img src="images/slide_8115.jpg" width="526" height="350" alt="Otter"/>
  52.     </div>
  53.     <p class="caption" id="caption"></p>
  54.   </div>
Suggestions would be greatly appreciated.

Todd