آموزش ایجاد Image Slider با انگولار

آموزش ایجاد Image Slider با انگولار

آموزش ایجاد Image Slider با Angular

در این مقاله، ما یاد خواهیم گرفت که چگونه می توان یک Image Slider را با استفاده از کتابخانه NGX-Slick-Carousel Angular ایجاد کنیم. Image Slider همچنین به نام image carousels شناخته می شود و برای نشان دادن چندین عکس برای ایجاد یک اسلایدر بسیار مفید است.

 

آموزش image slider در angular

در این مقاله، ما یاد خواهیم گرفت که چگونه می توان یک 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

 


ایجاد image slider با انگولار


گام دوم:


پروژه را در 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   

 

آموزش ایجاد image slider در angular


حال فایل package.json باز کنید و چک کنید پکیج ها در پروژه نصب شده باشند.


image slider در انگولار


گام سوم:


فایل 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» تغییر دهید و برخی از تصاویر نسخه ی نمایشی را به این پوشه اضافه کنید.


image slider در angular


گام ششم:


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>  


حال پروژه را اجرا کنید و نتیجه را ببینید:


آموزش فارسی  angular

 

بنابراین ما در این مقاله به شما نحوه ی ایجاد Image Slider با Angular را یاد دادیم.


منبع: www.c-sharpcorner.com


امیدواریم این آموزش برای شما عزیزان مفید واقع گردیده باشد.
"با تشکر، مجموعه ABLY" 

نظرات یا سوالات خودرا با ما درمیان بگذارید

0912 097 5516 :شماره تماس
0713 625 1757 :شماره تماس