Angular Swiper (Carousel)
كيف أقوم بإنشاء Carousel في Angular بأسهل طريقة؟
المكتبات المطلوبة:
https://www.npmjs.com/package/@ngx-translate/core
https://stackoverflow.com/questions/69564969/ngx-useful-swiper-setup-in-angular-8-gives-error
npm install swiper@8.3.0
محتوى ملف الـ ts
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { map, Observable, shareReplay } from 'rxjs';
// import { SwiperOptions } from 'swiper';
import SwiperCore, { Navigation, Pagination, SwiperOptions } from 'swiper';
// install Swiper modules
SwiperCore.use([Navigation, Pagination]);
@Component({
selector: 'app-important-videos',
templateUrl: './important-videos.component.html',
styleUrls: ['./important-videos.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ImportantVideosComponent implements OnInit {
@Input('items') items: any = [];
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
shareReplay()
);
constructor(
private breakpointObserver: BreakpointObserver) {
}
config: SwiperOptions = {
// slidesPerView: 4,
spaceBetween: 0,
keyboard: false,
navigation: false,
pagination: false,
grabCursor: false,
loop: true,
preloadImages: false,
lazy: true,
nested: true,
centeredSlides: false,
autoplay: {
delay: 7000,
disableOnInteraction: false
},
speed: 1000,
};
ngOnInit(): void {
}
onSwiper(swiper: any[]) {
// console.log(swiper);
}
onSlideChange() {
// console.log('slide change');
}
}
ملف الـ HTML
<swiper class="mb-3" [config]="config" [slidesPerView]="(isHandset$ | async)? 1 : 3">
<ng-template *ngFor="let item of items" swiperSlide>
<div class="card p-3 mr-3">
<div class="d-flex align-items-center">
<div class="image">
<img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
class="rounded ml-2" width="155">
</div>
<div class="ml-3 w-100">
<h4 class="mb-0 mt-0">Alex HMorrision</h4>
<span>Senior Journalist</span>
<div class="p-2 mt-2 bg-primary d-flex justify-content-between rounded text-white stats">
<div class="d-flex flex-column">
<span class="articles">Articles</span>
<span class="number1">38</span>
</div>
<div class="d-flex flex-column">
<span class="followers">Followers</span>
<span class="number2">980</span>
</div>
<div class="d-flex flex-column">
<span class="rating">Rating</span>
<span class="number3">8.9</span>
</div>
</div>
<div class="button mt-2 d-flex flex-row align-items-center">
<button class="btn btn-sm btn-outline-primary w-100 ml-2">Chat</button>
<button class="btn btn-sm btn-primary w-100">Follow</button>
</div>
</div>
</div>
</div>
</ng-template>
</swiper>
ملف الـ scss:
@import 'swiper/scss';
@import 'swiper/scss/navigation';
@import 'swiper/scss/pagination';
.card {
width: 400px;
border: #000 solid 1px;
border-radius: 10px;
background-color: #fff;
}
.stats {
background: #f2f5f8 !important;
color: #000 !important;
}
.articles {
font-size: 10px;
color: #a1aab9;
}
.number1 {
font-weight: 500;
}
.followers {
font-size: 10px;
color: #a1aab9;
}
.number2 {
font-weight: 500;
}
.rating {
font-size: 10px;
color: #a1aab9;
}
.number3 {
font-weight: 500;
}
إعداد:
تعليقات
إرسال تعليق