Javascript 使用离子幻灯片创建偏移。用户应该看到下一张拉刀幻灯片

我正在学习ionic，并想创建一个带有Ionion幻灯片的水平卷轴。用户应该看到下一张幻灯片，但只会被拉出来。请看下面我的图片。稍后我将使用*ngFor循环遍历所有元素。我用的是ionic2和angular2

我的代码如下所示：

<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>

来点甜鸡尾酒

西奈
现场音乐
西奈
现场音乐
西奈
现场音乐

github

首先在ionic应用程序中安装swiper

npm安装--保存angular2有用的swiper

将swiper.css和swiper.js文件添加到爱奥尼亚应用程序的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> 

并将其添加到导入数组中

  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>

---

输出将如下..

我有离子1溶液，如果您需要，非常感谢！但我不能用离子2实现它。你有没有发现什么让这成为可能@varunaaruruhey你解决了这个问题。.我现在得到了这样的要求：/hey@varunaaruru我使用了这个：对于偏移量，在配置对象中使用浮点值。@varunaaruru例如：

config={pagination:'.swiper pagination'，slideService:1.8，centeredSlides:false，paginationClickable:true，spaceBetween:10}; 
<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>

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
        };