Create an offset using ion slides. User should see the following advanced slides.

Question

I am studying ionic and want to create a horizontal scroll with ionic slides. The user should see the following slides, but only stretches. Look at my image below. Later I will go through all the elements with * ngFor. I am using ionic2 and angular2

My code is as follows:

<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

First install swiper in the ionic application,

npm install --save angular2 -useful-swiper

add swiper.css and swiper.js files to index.html of ionic application

<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- appmodule.ts

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>

config in.ts .. ex.

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

: