<div class="topmenu border-bottom-cd">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <span class="swiper-slide padding" ng-click="selectedTab($index)" ng-repeat="slide in slides" id="{{slide.id}}" style="width:auto" ng-class="{true:'font-weight-bold color-f23c39 ',
 
false:''}[slideIndex ==$index]">{{slide.name}}</span>
      <span class="swiper-slide padding width-percentage-10" ></span>
      <span class="swiper-slide padding width-percentage-10"></span>
      <span class="swiper-slide padding width-percentage-10"></span>
 
      <span class="swiper-slide padding width-percentage-10"></span>
    </div>
  </div>
</div>
<ion-slide-box show-pager="false" class="has-header" on-slide-changed="slideChanged($index)">
  <ion-slide ng-repeat="slide in slides"  >
    <div class="list">
 
      <h2>title:{{slide.name}}</h2>
    </div>
  </ion-slide>
</ion-slide-box>

$scope.slides = [
  {name: '健康資訊',
id:1},
  {name: '健康知識',
id:2},
  {name: '健康問答',
id:3},
  {name: '健康圖書',
id:4},
  {name: '健康資訊',
id:5},
  {name: '健知識',
id:6},
  {name: '健問答',
id:7},
  {name: '健圖書',
id:8},
  {name: '圖書',
id:9},
  {name: '資訊',
id:10},
  {name: '知識',
id:11},
  {name: '問答',
id:12},
  {name: '圖書',
id:13},
  {name: '健康資訊',
id:14},
  {name: '健康知識',
id:15},
  {name: '健康問答',
id:16},
  {name: '健康圖書',
id:17},
  {name: '健康資訊',
id:18},
];
$scope.slideIndex = 0;
//初始化swiper
var swiper = new Swiper('.swiper-container', {
freeMode : true,
});
$scope.slideChanged = function (index) {
$scope.slideIndex=index;
//定位
$location.hash( $scope.slides[index].id);
$anchorScroll();
};
$scope.selectedTab = function (index) {
$scope.slideIndex=index;
//滑動索引，跳轉到指定地方
$ionicSlideBoxDelegate.slide(index)
}

使用http://www.swiper.com.cn/    

swiper.js 外掛安裝   npm install swiper