Implement Swiper Slider In Angular.

What is Swiper Slider?

• The Swiper Slider Carousel is more than just an image slider because it allows us to include any kind of information, including HTML, graphics, and videos.
• Swiper has both vertical and horizontal sliders and allows numerous slide effects with a parallax effect.
• Additionally, it allows for the simple installation of several Sliders/Carousels in a nested fashion on a single view.

Step:1 Create New Angular Application.

ng new Demo

cd Demo

Step2: install below package

npm install –save ngx-useful-swiper@latest swiper

Step3: implement below css in angular.json

“styles”:
[
“./node_modules/swiper/swiper-bundle.css”,
]

Step4: Modified app.module.ts

import { NgxUsefulSwiperModule } from ‘ngx-useful-swiper’;
imports: [NgxUsefulSwiperModule]

Step5: write below code in app.component.ts

import { Component } from '@angular/core';
import { Mousewheel, Scrollbar, SwiperOptions } from 'swiper';
import { ViewChild } from '@angular/core';
import { SwiperComponent } from 'ngx-useful-swiper';
import SwiperCore, { Swiper, Virtual, Thumbs} from 'swiper';
SwiperCore.use([Virtual,Scrollbar]);

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ng-demo';
  @ViewChild('swiperRef', { static: false }) swiperRef?: SwiperComponent;
  slides = Array.from({ length: 1000 }).map((_, index) => `Slide ${index + 1}`);
  thumbsSwiper!:any;
  appendNumber = 2;
  prependNumber = 1;
  Images:Array<object> = [
  {
    src: 'https://loremflickr.com/g/600/400/paris',
    alt: 'Image1',
  },
  {
    src: 'https://loremflickr.com/g/600/400/paris',
    alt: 'Image2'
  }
]

  config: SwiperOptions = {
    pagination: { 
      el: '.swiper-pagination', 
      clickable: true,
      type:'fraction'
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    keyboard:
    {
      enabled:true
    },
    mousewheel:true,
   autoplay:
   {
      delay:2500,
      disableOnInteraction:false
   },
   thumbs:
   {
      swiper: this.thumbsSwiper
   },

    grabCursor:true,
    cubeEffect:{
      shadow: true,
      slideShadows: true,
      shadowOffset: 20,
      shadowScale: 0.94
    }
   
    grabCursor:true,
    coverflowEffect:{
      rotate: 50,
      stretch: 0,
      depth: 100,
      modifier: 1,
      slideShadows: true
    }
  }; 

  prepend()
  {
    this.swiperRef?.swiper.virtual.prependSlide([
      'Slide ' + --this.prependNumber
    ]);
  }

  append()
  {
    this.swiperRef?.swiper.virtual.appendSlide([
      'Slide ' + ++this.appendNumber
    ]);
  }

}

Step6: write below code in app.component.html

<swiper [config]="config" (swiper)="thumbsSwiper = $event">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ae/Olympic_flag.jpg" alt="img 1"></div>
    <div class="swiper-slide"><img src="https://loremflickr.com/g/600/400/paris" alt="img 4"></div>
  </div>  
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</swiper>
<h3>Default Slider</h3>
<swiper [config]="config">
   <div class="swiper-wrapper">
     <div class="swiper-slide">
       <div style="text-align: center;padding: 35%;background-color: rgb(248, 193, 193);">Slider1</div>
     </div>
     <div class="swiper-slide">
      <div style="text-align: center;padding: 35%;background-color: rgb(248, 193, 193);">Slider2</div>
     </div>
     <div class="swiper-slide">
      <div style="text-align: center;padding: 35%;background-color: rgb(248, 193, 193);">Slider3</div>
     </div>
     <div class="swiper-slide">
      <div style="text-align: center;padding: 35%;background-color: rgb(248, 193, 193);">Slider4</div>
     </div>
   </div>
   <div class="swiper-pagination"></div>
   <div class="swiper-button-next"></div>
   <div class="swiper-button-prev"></div>
</swiper>
<h3>Pagination</h3>
<swiper [config]="config">
   <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div style="text-align: center;padding: 35%;">Slider1</div>
    </div>
    <div class="swiper-slide">
     <div style="text-align: center;padding: 35%;">Slider2</div>
    </div>
    <div class="swiper-slide">
     <div style="text-align: center;padding: 35%;">Slider3</div>
    </div>
    <div class="swiper-slide">
     <div style="text-align: center;padding: 35%;">Slider4</div>
    </div>
   </div>
   <div class="swiper-pagination"></div>
</swiper>
<br>
<br>
<swiper [config]="config">
    <div class="swiper-wrapper">
      <div class="swiper-slide" *ngFor="let slide of slides">
         <div style="text-align: center;padding: 35%;">slide</div>
      </div>
      <div class="swiper-slide">
        <button (click)="prepend()">Prepend</button>
        <button (click)="append()">Append</button> 
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</swiper>

Step7: Run Application npm start