Question

我正在学习离子，并希望创建一个带有离子滑片的水平卷轴。用户应该看到下一张幻灯片，但只展开。请参见下图。稍后我将使用* 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>

Answer 1

github repo

首先在离子应用程序中安装swiper，

npm install --save angular2-useful-swiper

将swiper.css和swiper.js文件添加到ion.html的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>

在appmodule.ts文件中导入swiper-module

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

并将其添加到导入数组..

  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>

我们将使用.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
        };

输出将是这样的..

用离子滑块创建偏移量。用户应该看到下一个拉开的幻灯片

1 个答案: