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);
}
}