How do I center a slideshow containing various width images?

Question

Hello.  I have slideshows on my website that are centered as I like them to be.  But when I click on the thumbnail images that serve as links to open a page containing a slideshow, the image first appears at the left side of the page then quickly moves to the center.  The slideshows contain images of various widths.  I would like that the image appear in the center only.  In the stylesheet, the slideshow styling has the following information...
.cycle-slideshow {
    width: auto;
    max-height: 650px;
    background: #333;
    margin-bottom: 20px;
    z-index: 50;
.cycle-slideshow img {
    width: 0 auto;
    max-height: 610px;
    padding-top: 50px;
    opacity: 0;
    filter: alpha(opacity=0);
In the html code, the head section contains the javascript:
<script type="text/javascript" src="assets/jquery.cycle2.center.js"></script>
In the html code, the body section contains the following information for centering horizontally:
<div class="cycle-slideshow"
    data-cycle-fx=fade
    data-cycle-timeout=0
    data-cycle-caption="#alt-caption"
    data-cycle-caption-template="{{alt}}"
         data-cycle-auto-height=container
      data-cycle-center-horz=true
    data-cycle-center-vert=false>
My first thought was that the movement was due to the width of the slideshow being too wide.  But adjusting the width according to the widest image didn't work.  The widest image is 772px.  I tried other selectors but they didn't work either.  I would appreciate having your advice.  Thank you very much.

Answer 1

Hello Nancy 0,
Thank you for the information.  I didn't know that about the position and z-index.  I made the changes to the css as suggested.  But no change happened.  So I  tried changing the following in my html code so that it would be the same as malsup's sample for comparison...
data-cycle-fx=fade  to scrollHorz   
data-cycle-timeout=0  to 2000
The first image slide still loaded from the left and then centered on the page. Then the image slides scrolled along the page from right to left.  I then saw that Malsup has the example showing towards the bottom of its webpage.  After decreasing the window size, I saw that the first image appears very quickly from the lower left and then to the center as does mine except on a smaller scale.  I've come to the conclusion that this is a normal action for the javascipt function.  But would it be too much to ask if this could be less noticeable?   Also, when I made the changes to my slideshow to scroll, I noticed that as the image slides scrolled out of the slideshow, they extended beyond the slideshow border and even the container div.  I notice that this doesn't happen in the malsup example.  Malsup's image slides are not visible beyond the edge of the background color.  How can I have my slideshow images stop at the edge of the slideshow background color also?  I greatly appreciate your advice.  Thank you very much.
Noradc