Image slide

I now had my basic layout of my homepage created with a few Witt logos and Div's.
I knew from the start I wanted some type of feature on my main page...sure I wanted it simple but there had to be something other than a few tabs and information.

In my design for the site, there is the feature of a image slide that I wanted to automatically scroll through a couple of images. I thought it would be effective and wanted to show some photos without cramming the home page of images.

Here is the Html for the image slider within a div.

 <div id="para">

<div id="slidecontainer">

<div id="slide">
<img src="../newsimage.jpg" width="830" height="480">
<img src="../students_working_together_v3.jpg" width="830" height="480">
<img src="../students-safety.jpg" width="830" height="480">
<img src="../students-working-with-teacher.jpg" width="830" height="480">
<img src="../newsimage - Copy.jpg" width="830" height="480">
</div>





I now needed to munipulate the css of the slide. This is where it become a little tricky and I was to separate each image into a percentage while adjusting how many pixels the image would move at each percentage point.
This is the css code for what I did.
 


#slidecontainer {
    background-color:#FFFFFF;
    margin-left: auto;
    margin-right: auto;
    width: 830px;
    height: 480px;   
    overflow:hidden;
   
}

#slide {
    background-color:#0E69C9;
    width: 3320px;
    height: 480px;
    position: relative;
   
    -moz-animation-name: slidershow;
    -moz-animation-duration: 20s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-play-state: running;

}
   
    @-moz-keyframes slidershow {
         0% {right:0px;}
        20% {right:0px;}
        25% { right:830px;}
        45% {right: 830px;}
        50%{right: 1660px;}
        70%{right: 1660px;}
        75%{right: 2490px;}
        95%{right: 2490px;}
        100%{right:0px;}
    }

This did work out quite well, and wasnt too difficult to achieve, I did however have issues looping the images in a circle, instead they move from the start to the end, and then slide back to the start passing through all the image that have already moved through the slide.