lazyload_swiper.html

<div data-page="lazyload_swiper" class="page" style="padding: 5px 9px;">

	<!--HEADER開始-->
	<div class="navbar">
		<div class="navbar-inner">
			<div class="left">
				<a href="#" class="back link"><i class="icon icon-back"></i><span>上一頁</span></a>
			</div>
			<div class="center">
				lazyload_swiper
			</div>
			<div class="right">
				<a href="#" data-panel="right" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
			</div>
		</div>
	</div>
	<!--HEADER結束-->

	<!--要捲動的頁面區塊開始-->
	<div class="page-content">
	<style>
      .swiper-container {
  height: 100%;
}
.swiper-slide {
  background: #000;
  position: relative;
}
.swiper-slide img {
  position: absolute;
  left:50%;
  top:50%;
  max-width: 100%;
  max-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
    </style>
	   <div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img data-src="http://lorempixel.com/1600/1200/nature/1" class="swiper-lazy">
      <div class="preloader"></div>
    </div>
    <div class="swiper-slide">
      <img data-src="http://lorempixel.com/1600/1200/nature/2" class="swiper-lazy">
      <div class="preloader"></div>
    </div>
    <div class="swiper-slide">
      <img data-src="http://lorempixel.com/1600/1200/nature/3" class="swiper-lazy">
      <div class="preloader"></div>
    </div>
    <div class="swiper-slide">
      <img data-src="http://lorempixel.com/1600/1200/nature/4" class="swiper-lazy">
      <div class="preloader"></div>
    </div>
    <div class="swiper-slide">
      <img data-src="http://lorempixel.com/1600/1200/nature/5" class="swiper-lazy">
      <div class="preloader"></div>
    </div>
  </div>
  <div class="swiper-pagination color-white"></div>
</div>

	</div>
	<!--要捲動的頁面區塊開始-->
  
</div>