custom_swiper.html

<div data-page="custom_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">
				custom_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-custom {
  position:relative;
  height:100%;
}
.swiper-container {
  height:100%;
}
.swiper-slide {
  background: #fff;
}
.swiper-slide span {
  text-align:center;
  display:block;
  margin: 20px;
  font-size:21px;
}
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: none;
  border:1px solid #aaa;
  border-radius: 0 0 0 0;
  opacity:1;
  cursor: pointer;
}
.swiper-pagination-bullet-active {
  background: #007aff;
  border-color: #007aff;
}   
    </style>
	   <div class="swiper-custom">
    <div class="swiper-container">
      <div class="swiper-pagination"></div>
      <div class="swiper-wrapper">
        <div class="swiper-slide"><span>Slide 1</span></div>
        <div class="swiper-slide"><span>Slide 2</span></div>
        <div class="swiper-slide"><span>Slide 3</span></div>
        <div class="swiper-slide"><span>Slide 4</span></div>
        <div class="swiper-slide"><span>Slide 5</span></div>
        <div class="swiper-slide"><span>Slide 6</span></div>
        <div class="swiper-slide"><span>Slide 7</span></div>
      </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

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