JQuery Cycle - multiple slides and captions

JQuery Cycle - multiple slides and captions

I have a slideshow displaying 3 slides at once ( demo version here). I'd like to display a caption under each slide based on the alt tag. I have this working enough to where it's displaying the caption of the first slide in each set. I tried a few things to get the 2nd and 3rd captions displaying, but I'm at a loss.

Any help is much appreciated! Code is below.

  1. <html>
    <head>
    <style type="text/css">
    .slideshow { margin: 20px auto }
    .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
    .slide { margin:0; padding:0; }
    </style>
    <!-- include jQuery library -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

    <!-- include Cycle plugin -->
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>

    <!--  initialize the slideshow when the DOM is ready -->
    <script type="text/javascript">
    $(function() {
        $('.slideshow').cycle({
            fx: 'scrollLeft', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            after:    function() {
                var alt = $('img',this).attr('alt');
                $('#caption').html(alt);
            }
        });
    });
    </script>
    </head>
    <body>
        <div style="position: relative; overflow: hidden;" class="slideshow">

            <div class="slide">
            <a href="http://google.com"><img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" alt="Example1" /></a>
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" alt="Example2"  />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" alt="Example3" />
            </div>
                    <div class="slide">
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" alt="Example4" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" alt="Example5" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" alt="Example6" />
               </div>
           
                    <div class="slide">
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" alt="Example7" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="200" height="200" alt="Example8" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach9.jpg" width="200" height="200" alt="Example9" />
               </div>
        </div>
        <div width="230" align="center" id="caption"></div>

    </body>
    </html>