4 Replies Latest reply: May 15, 2013 11:10 AM by x_defect RSS

    Overlapping image hidden in HTML/CSS slideshow

    x_defect Community Member

      I'm attempting to create a simple slideshow with HTML / CSS / Jquery. I followed this tutorial -

      http://www.html5marketplace.com/slideshow/

       

      Here's my page (the slideshow is on the bottom image):

       

      http://beta.deltsig.com/photos.html

       

      If you hover over the left or right side of the bottom image, you'll see you can advance the images upon clicking. So the slideshow is functional - however there are supposed to be forward/back arrow buttons on the left and right that are hidden for some reason. (These are in the image file "slideshow-btns.png").

       

      I tried changing the z-index on the button and adding one to the slideshow itself, but it did nothing. Here's a sample of the button style:

       

      #container .prevButton{

                height:72px;

                width:68px;

                position:absolute;

                background:url('slideshow/slideshow-btns.png') no-repeat;

                top:50%;

                margin-top:-36px;

                cursor:pointer;

                z-index:6000;

                background-position:left top;

                left:0

      }

       

      Any idea how I can get it to show?