Angular 7 | Implement Slick Carousel with 3 Steps having Custom Navigation in Angular 6+

In our previous post, we discussed How to Implement Swiper Carousel in Angular in 3 easy steps,  Today we will discuss another but very powerful jQuery dependent Carousel Slick, which can be easily Implemented in and Angular 6+ version application.

Slick is very popular for a number of great features like AutoPlay, LazyLoaded images, Responsive and mobile first layout with other many customizable features.

In this article, we create a new Angular 7 Project and Implement Slick Carousel with custom Navigation Arrows.

 

 

Also, See:
Angular – Implement Ultimate! Swiper Image Slider/ Carousel in 3 Steps
Owl Carousel 2 in Angular 6/7
Owl Carousel 2 with Custom Navigation in jQuery

Step 1) Create a new Angular’s latest project with version 7.2.5

 

Step 2) Install NPM packages for ngx-slick-carousel and other dependencies for jquery and slick-carousel

 

Step 3) Make changes in the angular.json file to include Slick js and CSS files. These files will be available after installing the above packages in step 2

angular.json

 

Make changes in app main module file to include Slick package.

app.module.ts

Add slick directive in App component with various attribute options and event handling.

app.component.html

 

Slick directive above having methods which need to be added in App component file app.component.ts

Slick carousel next prev navigation buttons can be customized by adding following CSS in styles.scss

See working demo link here

After following above steps you will be able to see a beautiful Slick carousel in Angular App by running   $ ng serve --open . This command will rum app in the browser.

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Amina Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Amina
Guest
Amina

I want to ask how to make it responsive