Výukový program Angular 14 Slick Slick Integration Carousel/Slider

Kurz karuselu Angular 13 Slick; tento rychlý tutoriál vám pomůže naučit se integrovat plně reagující slick carousel/slider do aplikace Angular pomocí knihovny npm ngx-slick-carousel.

ngx-slick-carousel je skvělá karuselová knihovna, která je exkluzivně vytvořena pro úhlové verze 7+, ngx slick nabízí plně responzivní podporu a můžete s ní také implementovat vykreslování na straně serveru.

Nabízí velkou flexibilitu a umožňuje vám rozšířit přizpůsobení pro konkrétní funkce. Použití v úhlovém je jednoduché; nainstalujte jej, zaregistrujte úhledné téma a knihovnu CSS a přidejte některé externí skripty jQuery, které evokují úhledný kolotoč.

Příklad integrace karuselu Angular 13 Slick

Začneme instalací balíčku ngx-slick-carousel do angular a nakonfigurujeme modul slick carousel v hlavním souboru modulu aplikace angular. Definujte direktivu slick carousel v úhlové komponentě a některé vlastní funkce pro vyvolání slick posuvníku.

• Krok 1: Nainstalujte Angular App
• Krok 2: Nainstalujte Slick Library
• Krok 3: Přidejte Slick CSS a skript
• Krok 4: Přidejte modul Slick Carousel
• Krok 5: Přidejte Slick Carousel v Angular
• Krok 7: Spusťte aplikaci Angular

Nainstalovat Angular App

Vyvolejte proces úhlového vývoje instalací úhlového CLI:

npm install -g @angular/cli

Dále vytvořte novou úhlovou aplikaci pomocí následujícího příkazu:

ng new ng-carousel-demo

Přejděte do složky projektu:

cd ng new ng-carousel-demo

Instalovat Slick Library

Jakmile je projekt nainstalován, použijte následující tři příkazy npm k instalaci jQuery, slick carousel a ngx-slick-carousel do aplikace Angular.

 npm install jquery 
 npm install slick-carousel
 npm install ngx-slick-carousel --force

Přidat Slick CSS a skript

V dalším kroku musíte zahrnout slick CSS do pole stylů, podobně zahrnout jQuery a slick JS do pole skriptů.

Aktualizujte následující kód v angular.json soubor:

"styles": [
    "src/styles.scss",
    "node_modules/slick-carousel/slick/slick.scss",
    "node_modules/slick-carousel/slick/slick-theme.scss"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/slick-carousel/slick/slick.min.js"
]

Přidat modul Slick Carousel do hlavního modulu

V dalším kroku přidejte SlickCarouselModule do hlavního modulu aplikace aplikací, proto přidejte a aktualizujte následující kód v app.module.ts soubor:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { SlickCarouselModule } from 'ngx-slick-carousel';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SlickCarouselModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Implementujte dotykový posuvník obsahu

Slick slider můžete rychle implementovat pomocí direktivy ngx-slick-carousel, přidat požadované události a vlastnosti, použít direktivu ngFor k iteraci kolekce snímků.

Aktualizujte následující kód v app.component.html soubor:

<ngx-slick-carousel class="carousel" 
  #slickModal="slick-carousel" 
  [config]="slideConfig" 
  (init)="slickInit($event)"
  (breakpoint)="breakpoint($event)"
  (afterChange)="afterChange($event)"
  (beforeChange)="beforeChange($event)">
<div ngxSlickItem *ngFor="let slide of slides" class="slide">
<img src="{{ slide.img }}" alt="" width="100%">
</div>
</ngx-slick-carousel>
<button (click)="addSlide()">Add</button>
<button (click)="removeSlide()">Remove</button>
<button (click)="slickModal.slickGoTo(2)">slickGoto 2</button>
<button (click)="slickModal.unslick()">unslick</button>

Pro vyvolání posuvníku musíte nastavit události a metody, které jste deklarovali v šabloně HTML.

Aktualizujte následující kód v app.component.ts soubor:

import { Component } from '@angular/core';
    
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  slides = [
    { img: 'https://via.placeholder.com/600.png/09f/fff' },
    { img: 'https://via.placeholder.com/600.png/021/fff' },
    { img: 'https://via.placeholder.com/600.png/321/fff' },
    { img: 'https://via.placeholder.com/600.png/422/fff' },
    { img: 'https://via.placeholder.com/600.png/654/fff' },
  ];
  slideConfig = { slidesToShow: 4, slidesToScroll: 4 };
  addSlide() {
    this.slides.push({ img: 'http://placehold.it/350x150/777777' });
  }
  removeSlide() {
    this.slides.length = this.slides.length - 1;
  }
  slickInit(e: any) {
    console.log('slick initialized');
  }
  breakpoint(e: any) {
    console.log('breakpoint');
  }
  afterChange(e: any) {
    console.log('afterChange');
  }
  beforeChange(e: any) {
    console.log('beforeChange');
  }
  constructor() {}
  ngOnInit(): void {}
}

Nakonec zahrňte styl pro vytvoření vlastních navigačních šipek a do níže uvedené cesty přidejte následující kód.

Otevřete a aktualizujte následující kód v src/styles.css soubor:

.slick-slider {
    width: 88%;
    margin: auto;
    background: rgb(14, 13, 13);
  }
  
body .slick-prev, 
body .slick-next {
    height: 45px;
    width: 40px;
    background: grey !important;
    z-index: 100;
}

Spustit Angular Project

Nyní otevřete konzolu a spusťte příkaz a počkejte na spuštění vývojového serveru:

ng serve

K otestování aplikace použijte následující adresu URL:

http://localhost:4200

Závěr

V tomto rychlém příspěvku se nám podařilo zjistit, jak přidat slick slider do angular a vytvořit vlastní navigační šipky pomocí balíčku ngx-slick-carousel.