イオンスライドでオフセットを作成します。ユーザーは次のスライドを見るはずです

Question

私はionicを学んでおり、イオンスライドで水平スクロールを作りたいと思います。ユーザーは次のスライドを見るはずですが、ブローチのみです。下の私のイメージを参照してください。後で、* ngForですべての要素をループします。

<h3>For some sweet cocktails</h3><br> 
    <ion-slides 
    class="slide-wrapper" 
    slidesPerView="2" 
    spaceBetween="10" 
    autoplay="4300" 
    loop="true" > 
    <ion-slide> 
     <div [ngStyle]="{'background': 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(assets/img/bar.jpg)','background-repeat': 'no-repeat','background-size': 'cover', 'border-radius': '15px','display': 'block' }" class="inner2 center" > 
     <h1>Sin é</h1> 
     <h4>Live Music</h4> 
     </div> 
    </ion-slide> 
    <ion-slide> 
     <div [ngStyle]="{'background': 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(assets/img/bar.jpg)','background-repeat': 'no-repeat','background-size': 'cover', 'border-radius': '15px','display': 'block' }" class="inner2 center" > 
     <h1>Sin é</h1> 
     <h4>Live Music</h4> 
     </div> 
    </ion-slide> 
    <ion-slide> 
     <div [ngStyle]="{'background': 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(assets/img/bar.jpg)','background-repeat': 'no-repeat','background-size': 'cover', 'border-radius': '15px','display': 'block' }" class="inner2 center" > 
     <h1>Sin é</h1> 
     <h4>Live Music</h4> 
     </div> 
    </ion-slide> 
    </ion-slides> 

Answer 1

githubのrepo

まず、イオンアプリで

をswiperをインストールNPM：私は私のコードは次のようになりionic2を使用してangular2

よinstall --save angular2-useful-swiper

appmodule.tsファイル内のイオンアプリのindex.htmlを

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.js"></script> 

インポートswiperモジュールに

import { SwiperModule } from 'angular2-useful-swiper'; 

をswiper.cssとswiper.jsファイルを追加し、それを追加インポート配列..

imports: [ 
    BrowserModule, 
    IonicModule.forRoot(MyApp), 
    SwiperModule 
    ], 

ページのhtmlファイルあなたは、スライドを使いたい、

<ion-content> 
<swiper [config]="config"> 
     <div class="swiper-wrapper"> 
      <div class="swiper-slide" style="background-color:red;">Slide 1</div> 
       <div class="swiper-slide" style="background-color:yellow;">Slide 2</div> 
       <div class="swiper-slide" style="background-color:green;">Slide 3</div> 
       <div class="swiper-slide" style="background-color:red;">Slide 4</div> 
       <div class="swiper-slide" style="background-color:yellow;">Slide 5</div> 
       <div class="swiper-slide" style="background-color:green;">Slide 6</div> 
       <div class="swiper-slide" style="background-color:red;">Slide 7</div> 
       <div class="swiper-slide" style="background-color:yellow;">Slide 8</div> 
       <div class="swiper-slide" style="background-color:green;">Slide 9</div> 
       <div class="swiper-slide" style="background-color:red;">Slide 10</div> 
      </div> 
      <div class="swiper-pagination"></div> 
     </swiper> 
</ion-content> 

我々はslider..for元をカスタマイズする.TSファイルでconfigを使用します。

config: Object = { 
      pagination: '.swiper-pagination', 
      paginationClickable: true, 
      spaceBetween: 0, 
      slidesPerView: 1.2, //use any number 1.8 or 4.2 or 7.3 etc.. 
      direction: 'horizontal', 
      parallax: true, 
      freeMode: false, 
      fade: { 
       crossFade: true, 
      }, 
      allowSwipeToPrev: true, 
      roundLengths: false, 
      effect: 'slide' //use cube,flip,coverflow or fade 
     }; 

出力は次のようになります。..