CODEWITHSUNDEEP
javascriptangularionic-frameworkionic2
olivier
olivier

Reputation: 2645

Create offset with ion-slides. User should see the next broached slides

I'm learning ionic and would like to create a horizontal scroll with ion-slides. The user should see the next slides but only broached. See in my image below. Later i will loop trough all elements with *ngFor. I'm using ionic2 and angular2

enter image description here

My code looks like this: 

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

Upvotes: 4

Views: 1360

Answers (1)

varun aaruru
varun aaruru

Reputation: 2940

github repo

First install swiper in ionic app,

npm install --save angular2-useful-swiper

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

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

import swiper-module in appmodule.ts file

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

and add it in imports array..

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

in the html file of the page where you want to use slides,

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

we will use the config in .ts file to customize the slider..for 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
        };

output will be like this..output

Upvotes: 3

Related Questions