Ionic and SwiperJS

There’s a few demos floating around the internet on this, but to be honest, they always build the demo in to the first starting component page, which to me, isn’t really a good starting place for content.

So, here’s an example which is a bit more flexible to use, where you have images that scale and are swipeable.

Follow FreakyJolly’s example for the basic setup of it.
https://www.freakyjolly.com/ionic-slides-using-swiper-js-tutorial-by-examples/

For my example, just make a new page called introduction, and then add all the following code to it after you’ve added SwiperJS to your app.

introduction.page.html

<ion-content [fullscreen]="true" class="ion-padding"> 
  <ion-grid style="height:100%">
    <ion-row style="height:100%">
      
      <ion-col size="1">
        <span class="slider-nav arrow-prev" (click)="slidePrev(slideWithNav)">
          <div
            class="prev-icon-custom custon-nav"
            [class.disabled]="sliderOne.isBeginningSlide"
          ></div>
        </span>
      </ion-col> 
      
      <ion-col size="10" >
        
        <swiper id="slider1"
          pager="true"
          [initialSlide]="0"
          [slidesPerView]="1"
          [autoplay]="false"
          [loop]="false"          
          [spaceBetween]="30"
          [keyboard]="{ enabled: true }"
          [pagination]="{ clickable: true }"
          [navigation]="true"
          class="mySwiper"
          #slideWithNav
          (swiper)="onSwiper($event)"
          (slideChange)="onSlideChange(sliderOne,slideWithNav)">

          <ng-template swiperSlide> 
                1/4<br>
                <div class="divimage divimage1">
                  &nbsp;
                </div> 
          </ng-template>
          <ng-template swiperSlide> 
            2/4<br>
            <div class="divimage divimage2">
              &nbsp;
            </div> 
          </ng-template>
      
          <ng-template swiperSlide> 
            3/4<br>
            <div class="divimage divimage3">
              &nbsp;
            </div> 
          </ng-template>
    
          <ng-template swiperSlide>            
            <div class="container">
              <div class="center">
                <a style="width:100%" style="text-decoration:none;" class=" " href="#" (click)="finished()" routerLink="/home" routerDirection="root" >Begin...</a>
              </div>
            </div>
          </ng-template> 
        </swiper>

      </ion-col>
      <ion-col size="1">
        <span class="slider-nav arrow-next" style="float: right; padding-right: 15px;" (click)="slideNext(slideWithNav)">
          <div
            class="next-icon-custom custon-nav"
            [class.disabled]="sliderOne.isEndSlide"
          ></div>
        </span>
      </ion-col>

    </ion-row>
  </ion-grid>
 
            
  <style>

 
.divimage {    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;    
    height: 100%;
}
.divimage1 {
    background-image: url("https://picsum.photos/600/900?t=1");    
}

.divimage2 {
    background-image: url("https://picsum.photos/600/900?t=2");    
}
.divimage3 {
    background-image: url("https://picsum.photos/600/900?t=3");    
}


    .container { 
      height: 100%;
      position: relative;      
    }
    
    .center {
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    </style>

</ion-content>

introduction.page.ts

import { Component, ViewChild, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import { GlobalsService } from '../globals/globals'; 
import { IonSlides } from '@ionic/angular';  

@Component({
  selector: 'app-introduction',
  templateUrl: './introduction.page.html',
  styleUrls: ['./introduction.page.scss'],
})

export class IntroductionPage 
{
  @ViewChild('slideWithNav', { static: false }) slideWithNav: IonSlides; 

  sliderOne: any; 

  slideOpts = {
    initialSlide: 1,
    speed: 400,
  };

  //Configuration for each Slider
  slideOptsOne = {
    initialSlide: 0,
    slidesPerView: 1,
    autoplay: true,
  }; 
  
  constructor(

    private nav: NavController,
    public globalsvals: GlobalsService 

  ) { 
    this.sliderOne = {
      isBeginningSlide: true,
      isEndSlide: false,
      slidesItems: [
        {
          id: 995,
        },
        {
          id: 925,
        },
        {
          id: 940,
        },
        {
          id: 943,
        },
        {
          id: 944,
        },
      ],
    }; 
  }

  //Move to Next slide
  slideNext(slideView) {
    slideView.swiperRef.slideNext(500);
  }

  //Move to previous slide
  slidePrev(slideView) {
    slideView.swiperRef.slidePrev(500);
  }

  //Method called when slide is changed by drag or navigation
  slideDidChange(object, slideView) {
    this.checkIfNavDisabled(object, slideView);
  }

  //Call methods to check if slide is first or last to enable disbale navigation
  checkIfNavDisabled(object, slideView) {
    this.checkisBeginning(object, slideView);
    this.checkisEnd(object, slideView);
  }

  checkisBeginning(object, slideView) {
    object.isBeginningSlide = slideView?.swiperRef?.isBeginning;
    console.log('object.isBeginningSlide', object);
  }
  checkisEnd(object, slideView) {
    object.isEndSlide = slideView?.swiperRef?.isEnd;
    console.log('object.isEndSlide', object);
  }

  onSwiper(event) {
    // console.log(event);
  }
  onSlideChange(object, slideView) {
    this.checkIfNavDisabled(object, slideView);
  }

  finished()
  {
    this.globalsvals.welcomefirstvisitdone = 1;
    // Hide the slider due to a weird flicker 
    document.getElementById("slider1").style.visibility = "hidden"; 
  }

}

introduction.page.css


@import "~swiper/css";
@import "~swiper/css/pagination";
@import "~swiper/css/navigation";
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%234c71ae'%2F%3E%3C%2Fsvg%3E") !important;
  }
  
  .swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%234c71ae'%2F%3E%3C%2Fsvg%3E") !important;
  }


  // Slider Style START
.custon-nav {
    height: 48px;
    width: 20px;
    cursor: pointer;
  
    vertical-align: middle;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .prev-icon-custom {
    background: url(data:image/png;base64,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)
      no-repeat scroll 0px 0px;
  }
  .prev-icon-custom.disabled {
    opacity: 0.4;
    cursor: default;
  }
  .next-icon-custom {
    background: url(data:image/png;base64,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)
      no-repeat scroll -32px 0px;
  }
  .next-icon-custom.disabled {
    opacity: 0.4;
    cursor: default;
  }
  .slider-nav {
    ion-icon {
      height: 100%;
    }
  }
  
  .slide-text {
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      color: white;
      background: #afafaf;
      width: 30%;
      border-radius: 4px;
    }
  }
  // Slider Style STOP

introduction.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { IntroductionPageRoutingModule } from './introduction-routing.module';
import { IntroductionPage } from './introduction.page';
import { SwiperModule } from 'swiper/angular';

@NgModule({
  imports: [
    CommonModule,
    SwiperModule,
    FormsModule,
    IonicModule,
    IntroductionPageRoutingModule
  ],
  declarations: [IntroductionPage]
})
export class IntroductionPageModule {}