Code

<!-- Responsive slider - START -->
<div class="responsive-slider-parallax" data-spy="responsive-slider" data-parallax="true" data-parallax-direction="1">
  <div class="slides-container" data-group="slides">
    <ul>
      <li>
        <div class="slide-body" data-group="slide">
          <div class="container">
            <div class="wrapper">
              <div class="caption header" data-animate="slideAppearRightToLeft" data-delay="500" data-length="300">
                <h2>Responsive slider</h2>
                <div class="caption sub" data-animate="slideAppearLeftToRight" data-delay="800" data-length="300">With one to one swipe movement!</div>
              </div>
              <div class="caption img-html5" data-animate="slideAppearLeftToRight" data-delay="200">
                <img src="../img/html5.png">
              </div>
              <div class="caption img-css3" data-animate="slideAppearLeftToRight">
                <img src="../img/css3.png">
              </div>
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="slide-body" data-group="slide">
          <div class="container">
            <div class="wrapper">
              <div class="caption header" data-animate="slideAppearRightToLeft" data-delay="500" data-length="300">
                <h2>Twitter Boostrap</h2>
                <div class="caption sub" data-animate="slideAppearLeftToRight" data-delay="800" data-length="300">Compatible!</div>
              </div>
              <div class="caption img-bootstrap" data-animate="slideAppearDownToUp" data-delay="200">
                <img src="../img/bootstrap.png">
              </div>
              <div class="caption img-twitter" data-animate="slideAppearUpToDown">
                <img src="../img/twitter.png">
              </div>
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="slide-body" data-group="slide">
          <div class="container">
            <div class="wrapper">
              <div class="caption header" data-animate="slideAppearRightToLeft" data-delay="500" data-length="300">
                <h2>Custom animations</h2>
                <div class="caption sub" data-animate="slideAppearLeftToRight" data-delay="800" data-length="300">For any caption you use!</div>
              </div>
              <div class="caption img-jquery" data-animate="slideAppearDownToUp" data-delay="200">
                <img src="../img/jquery.png">
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <a class="slider-control left" href="#" data-jump="prev"><i class="icon-angle-left"></i></a>
  <a class="slider-control right" href="#" data-jump="next"><i class="icon-angle-right"></i></a>
  <div class="pages">
    <a class="page" href="#" data-jump-to="1">1</a>
    <a class="page" href="#" data-jump-to="2">2</a>
    <a class="page" href="#" data-jump-to="3">3</a>
  </div>
</div>
<!-- Responsive slider - END -->