Swiper Slider

Swiper Slider is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior For more details

Installing via npm
npm i swiper
Example Code
clients.component.html 
  <swiper #swiper [config]="config" class="swiper swiper-container swiper-general">
    <ng-template swiperSlide class="p-0 m-0" data-aos="fade-up" data-aos-delay="700">
      <div class="our-client-img bg-light rounded-3 text-center">
        <img src="assets/images/client/client-1.svg" alt="client-1" class="client-img">
      </div>
    </ng-template>
    <ng-template swiperSlide class="p-0 m-0" data-aos="fade-up" data-aos-delay="700">
      <div class="our-client-img bg-light rounded-3 text-center">
        <img src="assets/images/client/client-2.svg" alt="client-2" class="client-img">
      </div>
    </ng-template>
    ....
  </swiper>
Script
clients.component.ts 
import { Component,ViewChild } from '@angular/core';
import { SwiperComponent } from "swiper/angular";
import { SwiperModule } from "swiper/angular";
import SwiperCore, { SwiperOptions, Navigation, Virtual } from 'swiper';
SwiperCore.use([Navigation, Virtual])
@Component({
  selector: 'app-clients',
  standalone: true,
  imports: [SwiperModule],
  templateUrl: './clients.component.html',
  styles: ``
})
export class ClientsComponent {

  config: SwiperOptions = {
    slidesPerView: 6,
    spaceBetween: 32,
    breakpoints: {
      320: { slidesPerView: 1 },
      550: { slidesPerView: 2 },
      991: { slidesPerView: 3 },
      1400: { slidesPerView: 6 },
      1500: { slidesPerView: 6 },
      1920: { slidesPerView: 6 },
      2040: { slidesPerView: 7 },
      2440: { slidesPerView: 8 },
    },
  }

  @ViewChild(SwiperComponent)
  swiper!: SwiperComponent;

  slideNext() {
    this.swiper.swiperRef.slideNext(100);
  }
  slidePrev() {
    this.swiper.swiperRef.slidePrev(100);
  }

}
Previous Next