Thanks for the help Paul.
Your solution does work, but adds a strange side-effect…
When the slide-show goes from Slide #1 to Slide #2, SLide #2 zooms by twice! (Same for Slide #3)
It is kind of a dizzying effect for readers.
I changed the transition settings in slideshow.js to make this side-effect more evident.
Just point to this file instead, and you’ll see what I mean…
$slideshow = {
context: false,
tabs: false,
timeout: 5000, // time before next slide appears (in ms)
// timeout: 1000, // time before next slide appears (in ms)
slideSpeed: 5000, // time it takes to slide in each slide (in ms)
// slideSpeed: 1000, // time it takes to slide in each slide (in ms)
tabSpeed: 400, // time it takes to slide in each slide (in ms) when clicking through tabs
fx: 'scrollRight', // the slide effect to use
// fx: 'scrollLeft', // the slide effect to use
// fx: 'fade', // the slide effect to use
init: function() {
// set the context to help speed up selectors/improve performance
this.context = $('#slideshow');
// set tabs to current hard coded navigation items
this.tabs = $('ul.slides-nav li', this.context);
// remove hard coded navigation items from DOM
// because they aren't hooked up to jQuery cycle
this.tabs.remove();
// prepare slideshow and jQuery cycle tabs
this.prepareSlideshow();
},
prepareSlideshow: function() {
// initialise the jquery cycle plugin -
// for information on the options set below go to:
// [JQuery Cycle Plugin - Option Reference](http://malsup.com/jquery/cycle/options.html)
$("div.slides > ul", $slideshow.context).cycle({
fx: $slideshow.fx,
timeout: $slideshow.timeout,
speed: $slideshow.slideSpeed,
fastOnEvent: $slideshow.tabSpeed,
pager: $("ul.slides-nav", $slideshow.context),
pagerAnchorBuilder: $slideshow.prepareTabs,
before: $slideshow.activateTab,
pauseOnPagerHover: true,
pause: true
});
},
prepareTabs: function(i, slide) {
// return markup from hardcoded tabs for use as jQuery cycle tabs
// (attaches necessary jQuery cycle events to tabs)
return $slideshow.tabs.eq(i);
},
activateTab: function(currentSlide, nextSlide) {
// get the active tab
var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);
// if there is an active tab
if(activeTab.length) {
// remove active styling from all other tabs
$slideshow.tabs.removeClass('on');
// add active styling to active button
activeTab.parent().addClass('on');
}
}
};
$(function() {
// initialise the slideshow when the DOM is ready
$slideshow.init();
});
$('#s1').cycle({timeout:2000});
$('#pauseButton').click(function() {
$('#s1').cycle('pause');
});
I agree that the problem really needs to be resolved in the JavaScript file. (It would be nice if the JavaScript Forum wouldn’t keep throwing this back on to the CSS side. Different levels of support I guess…) 
I was hoping to get some help on the JQuery forums, but I cannot register at their website and the author of the code won’t help me figure out why I can’t sign up?! 
Will have to kick around my version, Rayzur’s versions, and your version and see which makes the most sense?!
Maybe I was looking in the wrong JavaScript file, but when I looked in jquery.cycle.all.min.js it looked like “spaghetti code” and not knowing JavaScript, I certainly didn’t see any clear areas or variables that would help fix this problem.
I did see some “widths”, but don’t see where the data is coming in from or how it is being manipulated. Once again showing that “good code” is “documented code”!!! (Now we know why JavaScript programmers get such a bad wrap among other developers! Anyways…) 
Debbie
(Not sure how we did it, but I thought it looked great.)
