swiper-parallax.html

<div class="navbar">
  <div class="navbar-inner">
    <div class="left sliding"><a href="swiper.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
    <div class="center sliding">Slider Horizontal</div>
    <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
  </div>
</div>
<div class="pages navbar-through">
  <div data-page="swiper-horizontal" class="page">
    <div class="page-content">
      <div data-pagination=".swiper-pagination" data-parallax="true" data-next-button=".swiper-button-next" data-prev-button=".swiper-button-prev" data-speed="600" class="swiper-container swiper-init ks-parallax-slider">
        <div data-swiper-parallax="-23%" style="background-image:url(http://lorempixel.com/900/600/nightlife/2/)" class="swiper-parallax-bg"></div>
        <div class="swiper-pagination color-white"></div>
        <div class="swiper-button-next color-white"></div>
        <div class="swiper-button-prev color-white"></div>
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div data-swiper-parallax="-100" class="swiper-slide-title">Slide 1</div>
            <div data-swiper-parallax="-200" class="swiper-slide-subtitle">Subtitle</div>
            <div data-swiper-parallax="-300" class="swiper-slide-text">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
            </div>
          </div>
          <div class="swiper-slide">
            <div data-swiper-parallax="-100" class="swiper-slide-title">Slide 2</div>
            <div data-swiper-parallax="-200" class="swiper-slide-subtitle">Subtitle</div>
            <div data-swiper-parallax="-300" class="swiper-slide-text">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
            </div>
          </div>
          <div class="swiper-slide">
            <div data-swiper-parallax="-100" class="swiper-slide-title">Slide 3</div>
            <div data-swiper-parallax="-200" class="swiper-slide-subtitle">Subtitle</div>
            <div data-swiper-parallax="-300" class="swiper-slide-text">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>