framework7.angular/kitchen-sink-material/swiper.html

Full Featured Mobile HTML Framework For Building iOS & Android Apps using Angularjs

<div data-page="swiper" class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left"><a href="index.html" class="back link icon-only"><i class="icon icon-back"></i></a></div>
      <div class="center">Swiper Slider</div>
      <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
    </div>
  </div>
  <div class="page-content">
    <div class="content-block">
      <p>Framework7 comes with powerful and most modern touch slider ever - <a href="http://idangero.us/swiper" class="external" target="_blank">Swiper Slider</a> with super flexible configuration and lot, lot of features. Just check the following demos:</p>
    </div>
    <div class="content-block-title">Swiper Examples</div>
    <div class="list-block">
      <ul>
        <li><a href="swiper-horizontal.html" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Swiper Horizontal</div>
            </div></a></li>
        <li><a href="swiper-vertical.html" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Swiper Vertical</div>
            </div></a></li>
        <li><a href="swiper-space-between.html" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Space Between Slides</div>
            </div></a></li>
        <li><a href="swiper-multiple.html" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Multiple Per Page</div>
            </div></a></li>
        <li><a href="swiper-nested.html" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Nested Swipers</div>
            </div></a></li>
        <li><a href="swiper-loop.html" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Infinite Loop Mode</div>
            </div></a></li>
        <li><a href="swiper-3d-cube.html" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">3D Cube Effect</div>
            </div></a></li>
        <li><a href="swiper-3d-coverflow.html" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">3D Coverflow Effect</div>
            </div></a></li>
        <li><a href="swiper-3d-flip.html" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">3D Flip Effect</div>
              <div class="item-after"><span class="badge bg-green">NEW</span></div>
            </div></a></li>
        <li><a href="swiper-fade.html" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Fade Effect</div>
            </div></a></li>
        <li><a href="swiper-scrollbar.html" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">With Scrollbar</div>
            </div></a></li>
        <li><a href="swiper-gallery.html" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Two Way Control Gallery</div>
            </div></a></li>
        <li><a href="swiper-custom.html" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Custom Controls</div>
            </div></a></li>
        <li><a href="swiper-parallax.html" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Parallax</div>
            </div></a></li>
        <li><a href="swiper-pagination-progress.html" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Progress Pagination</div>
              <div class="item-after"><span class="badge bg-green">NEW</span></div>
            </div></a></li>
        <li><a href="swiper-pagination-fraction.html" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Fraction Pagination</div>
              <div class="item-after"><span class="badge bg-green">NEW</span></div>
            </div></a></li>
      </ul>
    </div>
  </div>
</div>