As a newcomer to CSS3 transitions, I am attempting to create an image slideshow specifically for webkit browsers. The setup involves three images aligned next to each other within a wide DIV container, which is nested inside another container with hidden overflow. This design ensures that only one image is visible at a time.
Below you will find the HTML and CSS code for this project.
HTML
<div id = "imageHolder">
<div id="slide1_images">
<img src="./images/fish.jpg" />
<img src="./images/desert.jpg" />
<img src="./images/space.jpg" />
</div>
</div>
CSS
#imageHolder
{
width: 320px;
height: 240px;
border: 1px solid grey;
overflow: hidden;
position: relative;
}
#slide1_images
{
position:absolute;
left:0px;
width:960px;
-webkit-transition: -webkit-transform 0.5s;
}
To test the transition effect, a CSS hover selector has been included in the code. When the user hovers over the image (specifically the inner DIV), the set moves to the left by 320 pixels (equal to the width of each image).
CSS for hover
#slide1_images:hover
{
-webkit-transform:translate(-320px,0);
}
Thus far, the hover functionality works smoothly. Now, I aim to achieve the same action upon clicking a JavaScript button named btnNext on the page. However, my current implementation does not produce the desired result.
Javascript
<script type = "text/javascript">
function btnNext_clicked()
{
document.getElementById("slide1_images").style.-webkit-transform = "translate(-320px,0)"
}
</script>
I acknowledge that there may be an error or oversight on my part. Could someone kindly assist me in rectifying the Javascript function? Your help is greatly appreciated in advance :)