Question

I am new to CSS3 transitions. I am trying to make a image slideshow for webkit only. there are 3 images aligned next to each other inside a wide DIV. This wide DIV is inside a container DIV whoose overflow property has been set as hidden. the width of the container DIV is equal to each Image, hence user can see only one image at a time.

here is the HTML and CSS for that.

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;                      
     }

Now I have added a CSS hover selector in the code just to test the transition. when user hovers over the image (the inner DIV, to be precise), the whole set moves to left by 320 pixels (which is the width of each image).

CSS for hover

    #slide1_images:hover
     {
       -webkit-transform:translate(-320px,0);
     }

Upto this the code works perfectly, when I hover mouse over the first image, the set moves left and the 2nd image fits perfectly in the outer DIV.

What I want is, to perform the same action on Javascript button click. I have added a button called btnNext in my page. How can I fire the translate from the button click event? I tried the below but it does not work.

Javascript

    <script type = "text/javascript">
       function btnNext_clicked()
        {                   
          document.getElementById("slide1_images").style.-webkit-transform = "translate(-320px,0)"
        }
    </script> 

I am sure I have done something stupid! could you please help me out fixing the Javascript function? Thanks a lot in advance 🙂

Answer 1

With the obvious caveat its for webkit browsers only you just need to use

.style["-webkit-transform"] = ..

as - cannot be used in an inline propery name here: style.-webkit-transform