Swiper Card Carousel in Ionic

controller.js

controller('SwiperCtrl', function($scope, $stateParams) {
  $scope.options = {
    // loop: false,
    // grabCursor: true,
    // paginationHide: false,
    // paginationClickable: false,
    // direction: 'vertical',
    // spaceBetween: 50,
    effect: 'coverflow',
    speed: 100,
    // initialSlide: 1
    centeredSlides: true,
    slidesPerView: 'auto',
    coverflow: {
        rotate: 45,
        stretch: 0,
        depth: 80,
        modifier: 1,
        slideShadows : true
    }
  }
})

swiper.css

.swiper-container {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-container {
 	margin-top: 30px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 85vw;
    height: 72vh;
}

.box {
	height: 100%;
	border-radius: 10px;
	padding: 20px;
}

swiper.html

<ion-view view-title="Swiper">
	<ion-content scroll="false">
	  <ion-slides class="horizontal" options="options" slider="data.slider">
	    <ion-slide-page>
	      <div class="box"><h1>Content 1</h1></div>
	    </ion-slide-page>
	    <ion-slide-page>
	      <div class="box"><h1>Content 2</h1></div>
	    </ion-slide-page>
	    <ion-slide-page>
	      <div class="box"><h1>Content 3</h1></div>
	    </ion-slide-page>
	  </ion-slides>
	</ion-content>
</ion-view>