CSS3-based Carousel in Any Direction Regardless of Order_问答_开发者

I'm been trying to build a simple Carousel effect for a set of photos. Its is easy to do using the Effects library with PrototypeJS but I'm having problems understanding how to implement this with CSS3.

I've built out some solutions but they have only worked if there order of the photos in the HTML is also the order in which you plan to navigate. That is not the case here.

Regardless of the order of the photos:

To be able to use CSS3 based rules (translateX/transition etc) to animate the removal of the active image from view
Replace it with any other image, as selected in the drop-down menu
They both go in the same direction, as determined by the drop-down menu
They both appear side by side

For example:

The first photo is 'active' and in view
I select "from Left to Right" format he menu
I select "3" as the Photo Number
I click "Go"
As the 1st DIV of class 'photo' moves to the Right, the 3rd DIV (of class 'photo') is located to its left, and is also being moving in-sync to the Right

Some considerations:

@webkit preferred, but whatever
The CSS for layout, position, etc is intentionally non-existent so as not to hamper any solution
I use PrototypeJS for the sake of simplicity, and you can too, or no library at all, but NOT jquery (sorry)

Example Markup to base Ideas & Suggestions Around

I tried to include the full html/css/js of the example page here but it kept rendering in part during Preview, so just in case it is linked here:

http://www.gimee.org/question.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <title>Question</title> 
  <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
  <style>
  #demo {
    float:  left;
    width:  520px;
    height: 100%;
    overflow: hidden;
  }

  #container {
    width: 3000px;
  }

  .photo {
    float: left;
    : 500px;
    padding: 10px;
  }

  #controls {
    float: left;
  }
</style>
</head>
<body>
  <div id="demo">
    <div id="container">
      <div class="active photo">
        <img src="http://farm2.static.flickr.com/1161/4727417148_ed8d691aa3.jpg">
      </div>
      <div class="photo">
        <img src="http://farm2.static.flickr.com/1013/4730980370_75cceea5be.jpg">
      </div>
      <div class="photo">
        <img src="http://farm2.static.flickr.com/1401/4606449779_1bc79e6078.jpg">
      </div>
      <div class="photo">
        <img src="http://farm5.static.flickr.com/4053/4690748949_db09007187.jpg">
      </div>
    </div>
  </div>

  <div id="controls">
    <p>Direction:</p>
    <select id="direction">
      <option value="right">from Left to Right</option>
      <option value="left">from Right to Left</option>
    </select>
    <p>Photo Number:</p>
    <select id="photoNumber">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
    <p><a href="#" id="go">Go</a></p>
  </div>

  <script>
    var Demo = {
      run: function() {
        console.log('Init');
        Event.observe('go', 'click', this.go.bind(this));   

      },
      go: function(e) {
        var direction = $('direction开发者_运维问答').value;
        var photoNum  = $('photoNumber').value - 1;

        console.log('direction:', direction, 'photoNum:', photoNum);

        var container = $('container');
        var photoCurrent = container.select('.active')[0];
        var photoNext    = container.select('.photo')[photoNum];

      if (photoCurrent != photoNext) {

        if (direction=="right") {
          /*
          Move the two photos, appearing side-by-side, from Left to Right
          so that the 'Next' photo appears to push the 'Current' photo out
          */
            console.log('from Left to Right');

        } else {
         /*
          Move the two photos, appearing side-by-side, from Right to Left
          so that the 'Next' photo appears to push the 'Current' photo out
         */
         console.log('from Right to Left');

        }
      } else {
        console.log("Do nothing since you're asking for the currently active photo");
      }
    }
  };
  Demo.run();
  </script>
</body>
</html>

Okay, looks like I've found an answer myself. The idea is to reset the position each time you move a photograph so you can be agnostic when you come across it again, and shift it to a left or right based start point before the CSS3 animation.

It was resetting the position that I had a problem with, but with CSS3 animation based keyframes I can now overcome it.

/*
  NEXT PAGE
  Move INTO View from the Right side
*/
@-webkit-keyframes inFromRightAnim {
 0% {
   -webkit-transform: translateX(0%);
 }
 100% {
   -webkit-transform: translateX(-100%);
 }
}

.inFromRight {
 -webkit-animation-name:            inFromRightAnim;
 -webkit-animation-duration:        0.5s;
 -webkit-animation-timing-function: linear;
 -webkit-transform:                 translateX(-100%);
}

I still get some funkiness with the order as I cycle through but that's related to my buggy code as opposed to the photo positions.

What abour a CSS3 only solution? Without Javascripts?

This page has a collection of Image Sliders using only CSS, maybe that can help you.

http://speckyboy.com/2010/06/09/10-pure-css3-image-galleries-and-sliders/