آموزش ایجاد Image Slider با انگولار
آموزش ایجاد Image Slider با Angular
در این مقاله، ما یاد خواهیم گرفت که چگونه می توان یک Image Slider را با استفاده از کتابخانه NGX-Slick-Carousel Angular ایجاد کنیم. Image Slider همچنین به نام image carousels شناخته می شود و برای نشان دادن چندین عکس برای ایجاد یک اسلایدر بسیار مفید است.
در این مقاله، ما یاد خواهیم گرفت که چگونه می توان یک Image Slider را با استفاده از کتابخانه NGX-Slick-Carousel Angular ایجاد کنیم. Image Slider همچنین به نام image carousels شناخته می شود و برای نشان دادن چندین عکس برای ایجاد یک اسلایدر بسیار مفید است.
پیش نیازها:
- آشنایی با Angular 2 و یا نسخه بالاتر
- Visual Studio Code
- نصب Node and NPM
فن آوری هایی که ما برای ساخت این نسخه ی نمایشی استفاده می کنیم:
- Angular 7
- Bootstrap
- HTML and CSS
- ngx-slick-carousel library
آموزش ایجاد Image Slider با انگولار
گام اول:
یک پروژه Angular با استفاده از دستور زیر ایجاد کنید:
ng new ImageSlider
گام دوم:
پروژه را در Visual Studio Code باز کنید:
integrated terminal را با استفاده از Ctrl + ~ باز کنید و ngx-slick-carousel library را نصب کنید و با دستور زیر از Bootstrap استفاده کنید:
npm install slick-carousel –save
npm install ngx-slick-carousel --save
npm install bootstrap --save
حال فایل package.json باز کنید و چک کنید پکیج ها در پروژه نصب شده باشند.
گام سوم:
فایل angular.json را باز کنید و فایل CSS مناسب را در «styles» قرار دهید.
"styles": [
"src/styles.css",
"node_modules/slick-carousel/slick/slick.scss",
"node_modules/slick-carousel/slick/slick-theme.scss"
],
و فایل های JS را در scripts قرار دهید.
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/slick-carousel/slick/slick.min.js"
],
این مطلب را هم بخوانید: آموزش فارسي انگولار
گام چهارم:
ماژول ngx-sllick در فایل app.module.ts پیکربندی کنید. اجازه دهید ماژول مورد نیاز را در این فایل وارد کنیم.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SlickCarouselModule } from 'ngx-slick-carousel';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
SlickCarouselModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
گام پنجم:
پوشه src را گسترش دهید و روی پوشه Assets راست کلیک کنید. یک پوشه جدید زیر آن اضافه کنید و نام آن را به «images» تغییر دهید و برخی از تصاویر نسخه ی نمایشی را به این پوشه اضافه کنید.
گام ششم:
app.component.css را باز کنید و خطهای زیر را اضافه کنید:
.slick-slider {
width: 90%;
margin: auto;
}
گام هفتم:
app.component.ts را باز کنید و خطهای زیر را اضافه کنید:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
images = [
{ img: "../assets/images/1.jpg" },
{ img: "../assets/images/2.jpg" },
{ img: "../assets/images/3.jpg" },
{ img: "../assets/images/4.jpg" },
{ img: "../assets/images/5.jpg" },
{ img: "../assets/images/6.jpg" },
{ img: "../assets/images/7.jpg" },
{ img: "../assets/images/8.jpg" },
{ img: "../assets/images/9.jpg" },
];
slideConfig = {
"slidesToShow": 3,
"slidesToScroll": 3,
"dots": true,
"infinite": true
};
}
گام هشتم:
app.component.html را باز کنید و کدهای html را وارد کنید:
<div>
<div class="row">
<div class="col-sm-12 btn btn-primary">
Image Slider
</div>
</div>
</div>
<hr style="background-color:black" />
<div class="row">
<ngx-slick-carousel class="carousel" #slickModal="slick-carousel" [config]="slideConfig">
<div ngxSlickItem *ngFor="let image of images" class="slide">
<img src="{{ image.img }}" width="100%">
</div>
</ngx-slick-carousel>
</div>
حال پروژه را اجرا کنید و نتیجه را ببینید:
بنابراین ما در این مقاله به شما نحوه ی ایجاد Image Slider با Angular را یاد دادیم.
منبع: www.c-sharpcorner.com
امیدواریم این آموزش برای شما عزیزان مفید واقع گردیده باشد.
"با تشکر، مجموعه ABLY"