- ## Responsive slider

  With one to one swipe movement!

- ## Twitter Boostrap

  Compatible!

- ## Custom animations

  For any caption you use!

Prev Next
1 2 3

### Code

    <!-- Responsive slider - START -->
    <div class="responsive-slider" data-spy="responsive-slider" data-autoplay="true">
      <div class="slides" data-group="slides">
        <ul>
          <li>
            <div class="slide-body" data-group="slide">
              <img src="../img/slide-1.jpg">
              <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>
          </li>
          <li>
            <div class="slide-body" data-group="slide">
              <img src="../img/slide-2.jpg">
              <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>
          </li>
          <li>
            <div class="slide-body" data-group="slide">
              <img src="../img/slide-3.jpg">
              <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>
          </li>
        </ul>
      </div>
      <a class="slider-control left" href="#" data-jump="prev"><</a>
      <a class="slider-control right" href="#" data-jump="next">></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 -->