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">
</div>
</ng-template>
<ng-template swiperSlide>
2/4<br>
<div class="divimage divimage2">
</div>
</ng-template>
<ng-template swiperSlide>
3/4<br>
<div class="divimage divimage3">
</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 {}
Leave a Reply