function startSlideshow(slides) { 
    
        var totalSlideCount = 1 + slides.length; 

        var $slideshow = $('#slideshow'); 

        // markup contains only a single slide; before starting the slideshow we  
        // append one slide and prepend one slide (to account for prev/next behavior) 
        $slideshow.prepend('<img src="'+slides.pop()+'" />'); 
        if (totalSlideCount > 2 ) {
          $slideshow.append('<img src="'+slides.shift()+'" />'); 
        };  
        
        // start slideshow 
        $('#slideshow').cycle({ 
            fx: 'fade', 
            startingSlide: 1,  // start on the slide that was in the markup 
            timeout:  0, 
            speed:    "2000", 
            prev:    '#prev', 
            next:    '#next', 
            before:   onBefore 
        });  
        
         
        function onBefore(curr, next, opts, fwd) { 
            // on Before arguments: 
            //  curr == DOM element for the slide that is currently being displayed 
            //  next == DOM element for the slide that is about to be displayed 
            //  opts == slideshow options 
            //  fwd  == true if cycling forward, false if cycling backward 

            // on the first pass, addSlide is undefined (plugin hasn't yet created the fn yet) 
            if (!opts.addSlide) 
                return; 

            // have we added all our slides? 
            if (opts.slideCount == totalSlideCount) 
                return; 

            // shift or pop from our slide array  
            var nextSlideSrc = fwd ? slides.shift() : slides.pop(); 

            // add our next slide 
            opts.addSlide('<img src="'+nextSlideSrc+'" />', fwd == false); 
        }; 
    };