Sliding with transfoms : Sliding by translating the images (transitions and transforms)
Note: Animating by transitioning transforms is hardware accelerated on iPhone OS, making this a good option there.
Plan
- Create a container with overflow set to hidden.
- Inside that container, create another container with width equal to the width of all the images added together.
- Inside that, float the images left with no padding or margin.
When clicking a control, translate the second container to show the required image
Code
Exactly the same as Demo 1, but the JS looks like this: (times 4 for the vendor specific markup)
$(document).ready(function() { $("#slide2-1").click(function() { $("#slide2_images").css("-webkit-transform","translate(0px, 0px)"); }); $("#slide2-2").click(function() { $("#slide2_images").css("-webkit-transform","translate(-450px, 0)"); }); $("#slide2-3").click(function() { $("#slide2_images").css("-webkit-transform","translate(-900px, 0)"); }); $("#slide2-4").click(function() { $("#slide2_images").css("-webkit-transform","translate(-1350px, 0)"); }); });
.